How I need to use after style with tailwind?

March 14, 2022

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 with tailwind:

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 class="flex flex-col h-screen bg-black">
 <div class="flex justify-center items-center text-center min-h-screen align-middle py-5 mb-3">
        <div class="container">
            <div class="card">
                <div class="imgBx">
                    <h3>PUMP & DUMP</h3>
                    <br/>
                    <img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
                    cupiditate ullam animi fuga impedit odio dignissimos ab cum?
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <h3>PREVENTAS</h3>
                    <br/>
                    <img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
                </div>
                <div class="content">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
                    cupiditate ullam animi fuga impedit odio dignissimos ab cum?
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <h3>PASIVOS</h3>
                    <br/>
                    <img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
                </div>
                <div class="content">
                    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>

>Solution :

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;
}