Home
Brandon D
Info Card

Info Card

Information card with image

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

Card

Author Brandon D

9.3k

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

Author:
Prem..

3 years ago

19.3k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.2k
profile3

Author:
pablitodgb

3 months ago

192
Hotel rooms
A simple room overview

Author:
Matti

9 months ago

1.1k
Call to Action Box

Author:
Aitrik Saha

8 months ago

1.3k
Information card

Author:
Samuel Dawson

2 years ago

11.9k
Responsive card with image

Author:
Simon Scheffer

2 years ago

10.9k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.3k
Simple responsive cards

Author:
Shakti

2 years ago

9.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4k
Profile1

Author:
pablitodgb

3 months ago

349
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

5 months ago

804

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components