Card

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

Card

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

Author $@(\/)(\/)¥

Tailwind v3.4 1.9k 2

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

Product Card

Maxim

1 year ago

2k
Testimonial card

Leon Bachmann

3 years ago

13k
Travel Landing Page: Australia

Maxim

1 year ago

2.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:

Prashant

4 years ago

65.6k
Monkey card
First tailwind example

muhittin budak

1 year ago

1.5k
Responsive Cards

Anonymous

2 years ago

2.5k
Card
Jobs recommended for you LinkedIn Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

1.4k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

10 months ago

905
Tailwind image grid
tailwind picture grid

Anonymous

2 years ago

11.3k
card
It's a product card

SAURAV SINGH

1 year ago

1.5k
beautifull project page

Akram Khan

2 years ago

2.6k