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 2k 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

Elevated feature card

magersa

2 years ago

5k
offer card

ABDO-SY

1 year ago

1.5k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Abhiraj

1 year ago

2.8k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Responsive Features Section

ariaw

1 year ago

1.6k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
grid card

Md. Tofayel islam

2 years ago

2.6k
Tailwind CSS Blog Card

Morris Muriuki Muthigani

1 year ago

695
landing page

JUGENDRA GANGWAR

2 months ago

190
profile3

pablitodgb

1 year ago

1k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

983