Card

This tailwind example is contributed by $@(\/)(\/)Y, on 06-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

1.3k

Fork Fullscreen

<ul class="flex flex-col font-semibold rounded-b-lg dark:text-white bg-white dark:bg-gray-800">
            <li class="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
                <ion-icon name="grid-outline"></ion-icon>
                <p class="">5 Modules</p>
            </li>
            <li class="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
                <ion-icon name="videocam-outline"></ion-icon>
                <p class="">16 Videos</p>
            </li>
            <li class="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
                <ion-icon name="documents-outline"></ion-icon>
                <p class="">16 Assignment</p>
            </li>
            <li class="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
                <ion-icon name="people-outline"></ion-icon>
                <p class="">Beginner - Intermediate</p>
            </li>
            <li class="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
                <ion-icon name="timer-outline"></ion-icon>
                <p class="">1h 23mins</p>
            </li>
            <li class="w-full flex items-center justify-center pl-4 py-2">
                <button class="flex gap-2 items-center justify-center px-4 py-1 rounded text-white font-semibold bg-blue-500 transition ease-in-out delay-150 hover:bg-blue-600">
                        <ion-icon name="lock-open-outline"></ion-icon> 
                        <span>Register for Course</span>
                    </button>
            </li>
        </ul>
    </div>

<div class="flex flex-col shadow-lg shadow-gray-400 dark:shadow-gray-800/60">
        
        <img class="sm:w-[20rem] w-[16rem] object-cover rounded-t-lg"
            src="https://images.unsplash.com/photo-1649180556628-9ba704115795?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxweXRob24lMjBsb2dvfGVufDB8MHx8fDE3MzYxNTM1MjJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Card Image" />

<div class="flex flex-col shadow-lg shadow-gray-400 dark:shadow-gray-800/60">
        
        <img class="sm:w-[20rem] w-[16rem] object-cover rounded-t-lg"
            src="https://images.unsplash.com/photo-1678483789105-2720201bee03?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjaGF0JTIwZ3B0JTIwbG9nb3xlbnwwfDB8fHwxNzM2MTUzNjAyfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Card Image" />

</div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.3k
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

Author:
dev-fab250

4 months ago

495
Blog Author Card

Author:
EliteAI Tools

8 months ago

873
Simple card layout with image

Author:
Leon Bachmann

2 years ago

10.6k
offer card

Author:
ABDO-SY

6 months ago

724
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

1.9k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

62.7k
Card
Simple Card

Author:
Ashraf ali

7 months ago

1.4k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

4 months ago

628
Showcase Card

Author:
Jaber Zarif

1 year ago

2.2k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

1 month ago

279
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

7 months ago

663

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components