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

12.8k

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

2 years ago

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

Author:
Noob

2 years ago

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

49.7k
Hover effect card

Author:
Samuel Dawson

2 years ago

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

1 year ago

17.2k
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.1k
Horizontal card with image

Author:
Amit Pachange

2 years ago

13.7k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

4 months ago

789
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

8 months ago

1.3k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

1 month ago

181
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

6 months ago

1.1k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components