Card

This tailwind example is contributed by Samuel Abera, on 06-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Samuel Abera

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

Information card

Author:
Samuel Dawson

2 years ago

10.7k
Simple responsive cards

Author:
Shakti

1 year ago

8.2k
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

6 months ago

1.3k
Battery and signal
Battery and signal bar component

Author:
ardianhu

1 week ago

25
User Card

Author:
Md. Tofayel islam

1 week ago

106
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

1 year ago

9.5k
Info cards

Author:
Samuel Dawson

1 year ago

9.3k
Card grid for posts

Author:
Mr Robot

2 years ago

18.1k
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.

Author:
Abhiraj

1 week ago

54
Gradient card

Author:
TailwindFlex

1 year ago

7.6k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

4 months ago

684

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components