Home
Brandon D
Beautiful card design with image

Beautiful card design with image

This tailwind example is contributed by Brandon D, on 19-Jul-2022. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Brandon D

13.2k

Fork Fullscreen

<div class="flex px-3 py-3">
    <div class="max-w-sm rounded overflow-hidden shadow-lg">
        <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
            <p class="text-gray-700 text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
                perferendis eaque, exercitationem praesentium nihil.
            </p>
        </div>
        <div class="px-6 py-4">
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
        </div>
    </div>
</div>

Related Examples

Image card

Author:
Laurits

3 years ago

17.2k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

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

3 years ago

51.8k
Hover effect card

Author:
Samuel Dawson

2 years ago

31.7k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

18.8k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.7k
Horizontal card with image

Author:
Amit Pachange

3 years ago

14.9k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Author:
Maxim

1 year ago

1.5k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

3 weeks ago

36
Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

7 months ago

930
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components