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

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

20k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.8k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.6k
home
html , css

Author:
Hacker Development

9 months ago

1.9k
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Author:
Juan D. Cortorreal

2 months ago

279
Pricing Table

Author:
Akshay

3 years ago

11k
Minimal Testimonial Card

Author:
Amit Pachange

3 years ago

9k
Responsive Features Section

Author:
ariaw

10 months ago

898
split bg 2

Author:
Anonymous

8 months ago

405
Hotel rooms
A simple room overview

Author:
Matti

1 year ago

1.6k
Elevated feature card

Author:
magersa

2 years ago

4.3k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

829

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components