Tailwind card

This tailwind example is contributed by Conan Hilton, on 09-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Card

Author Conan Hilton

Tailwind v3.4 14.5k 18

Fork Fullscreen

<div class="flex flex-col justify-center items-center bg-gray-100 min-h-screen">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden max-w-lg w-full">
        <img src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606" alt="Mountain" class="w-full h-64 object-cover">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-2">Beautiful Mountain View</h2>
            <p class="text-gray-700 leading-tight mb-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu sapien porttitor, blandit velit ac,
                vehicula elit. Nunc et ex at turpis rutrum viverra.
            </p>
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2 object-cover">
                    <span class="text-gray-800 font-semibold">John Doe</span>
                </div>
                <span class="text-gray-600">2 hours ago</span>
            </div>
        </div>
    </div>
</div>

Related Examples

Hover effect card

Samuel Dawson

3 years ago

33.3k
Image card

Laurits

3 years ago

18.3k
Tailwind image card with text above it

I.P. Leroy

3 years ago

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

Anonymous

2 years ago

21.6k
Card grid for posts

Mr Robot

3 years ago

24.2k
Fancy blog post card

Mr Robot

3 years ago

13.4k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
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
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Trending Creators
Trending Creators

Omer fils ELENGA

1 week ago

8