Home
Conan Hilton
Tailwind card

Tailwind card

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

Card

Author Conan Hilton

10.8k

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

Author:
Samuel Dawson

1 year ago

23.9k
Image card

Author:
Laurits

1 year ago

13.7k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

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

Author:
Anonymous

11 months ago

15.9k
Card grid for posts

Author:
Mr Robot

1 year ago

17.1k
Fancy blog post card

Author:
Mr Robot

1 year ago

10.3k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

1 year ago

12.1k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

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

Author:
Amit Pachange

2 years ago

43k
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:

Author:
Prashant

2 years ago

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

Author:
Mr Robot

1 year ago

11k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

3 months ago

625

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent