Info Card

Information card with image

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

Card

Author Brandon D

Tailwind v3.4 10.5k 15

Fork Fullscreen

<div class="bg-white rounded shadow max-w-md mx-auto">
    <header class="p-4">
        <img src="https://via.placeholder.com/200" class="float-left rounded-full w-10 h-10 m-1 mr-3" />
        <h3 class="text-lg font-bold">Island Holiday Escape</h3>
        <p class="text-sm text-gray-600">5 nights (inc flights) from $1999</p>
    </header>

<section>
        <img src="https://via.placeholder.com/400x250" class="w-full" />
        <p class="text-sm text-gray-600 p-4">Omnis consectetur voluptatem labore aut et vel itaque recusandae. Et
            molestiae iure qui et nihil minus nes ciunt.</p>
    </section>

<footer class="p-4">
        <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline mr-3">Book Online</a>
        <a href="#" class="uppercase font-bold text-sm text-blue-700 hover:underline">More Info</a>
        <a href="#" class="float-right"><img src="https://img.icons8.com/flat_round/24/000000/share--v1.png"/></a>
        <a href="#" class="float-right mr-3"><img src="https://img.icons8.com/flat_round/24/000000/hearts.png"/></a>
    </footer>
</div>

Related Examples

Info Card

Prem..

4 years ago

20.9k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

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

CodewithFaraz

11 months ago

1.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

83
Image card with overlay text overlay

Santos78

3 years ago

33.1k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

13k
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

2 weeks ago

27
Hover effect card

Rakib Hasan Sohag

1 year ago

2.2k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Nicole Shalom

1 year ago

1.8k
Card for user contact

achelton pambo

2 years ago

3.2k