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

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

2 years ago

19.2k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19k
Card
Card

Author:
Aman kumar

1 year ago

2.1k
Border gradient

Author:
Samuel Dawson

2 years ago

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

Author:
Hamza Atig

4 months ago

729
Active Beauty Main Page

Author:
Maxim

5 months ago

777
card

Author:
pablitodgb

2 months ago

108
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

1.8k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.9k
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.6k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

9 months ago

2.1k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

11 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components