I'm using tailwind css, but I want to import some cards that I saw in a video. I know that I can use in class the after: attribute by tailwind, but its a waste of time when I already have it on css.
This cards are working perfectly without tailwind, but when I add the tailwind CSS a part of the :after is not working. I tried adding !important to the attributes but it still doesn't work.
How it shows without tailwind:
My code:
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
transform: skewY(-10deg);
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: white;
transition: 0.5s;
}
.container .card:before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 15px;
background-color: #ddc700;
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
}
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 50%;
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}
.container .card:hover {
transform: translateY(-40px);
}
.container .card .imgBx {
position: relative;
width: 300px;
height: 200px;
background-color: #c6b200;
display: flex;
align-items: center;
flex-direction: column;
}
.container .card .imgBx img {
max-width: 100px;
}
.container .card .imgBx h3 {
position: relative;
color: black;
margin-top: 10px;
}
.container .card .content {
position: relative;
width: 100%;
height: 200px;
padding: 20px;
color: black;
background: white;
text-align: center;
}
.container .card .content:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background: linear-gradient(transparent, transparent, gray);
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
z-index: -1;
}
.container .card:hover .content:before {
transform: translateY(40px) skewX(45deg);
filter: blur(5px);
opacity: 0.5;
}
.container .card:nth-child(1) {
z-index: 3;
}
.container .card:nth-child(2) {
z-index: 2;
}
.container .card:nth-child(3) {
z-index: 1;
}
@media (max-width: 414px) {
body {
overflow: auto;
}
.card {
width: 80%;
margin-bottom: 50px;
}
.container {
padding-top: 200px;
position: relative;
left: 15%;
top: 80%;
}
.container .card {
padding-bottom: 40px;
}
.container .card:hover {
transform: translateY(-25px);
}
}
<head>
<!-- Styles -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body >
<div >
<div >
<div >
<div >
<h3>PUMP & DUMP</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div >
<div >
<h3>PREVENTAS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div >
<div >
<h3>PASIVOS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
</div>
</div>
</body>
</html>
CodePudding user response:
Your problem is the height was only 50%
You need to make it like this
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 100%; /*Should change here from 50% to 100%*/
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}