Card

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

Card

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

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

1.5k

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

Image card with overlay text overlay

Author:
Santos78

3 years ago

32k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.7k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.6k
User profile card

Author:
Mr Robot

3 years ago

11.5k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

8 months ago

428
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

12k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

9 months ago

1.3k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.3k
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

Author:
CodewithFaraz

3 months ago

354
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

11 months ago

835
Animated cards

Author:
Michael Andreuzza

1 year ago

6.9k
Product card

Author:
Oliver Hansen

3 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components