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

20.1k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.9k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

3.2k
SimpleGrid

Author:
wtfbrh

1 year ago

1.3k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.8k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

1 year ago

1.1k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

9 months ago

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

Author:
RShubham kumar

2 years ago

4.6k
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.6k
Responsive Projects Section

Author:
ariaw

10 months ago

1.1k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

8 months ago

772
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

9 months ago

630

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components