Home
Md. Tofayel islam
Card with link

Card with link

This example can be used to show a CTA as a link instead of a button inside the card.

This tailwind example is contributed by Md. Tofayel islam, on 15-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author Md. Tofayel islam

2.1k

Fork Fullscreen

<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <svg class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
    </svg>
    <a href="#">
        <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Need a help in Claim?</h5>
    </a>
    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
    <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
        See our guideline
        <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
        </svg>
    </a>
</div>

Related Examples

Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

5 months ago

1.1k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

6 months ago

1k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

10 months ago

1.1k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.1k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

2 months ago

242
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

10 months ago

1.5k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

2.2k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.1k
card
best responsive tailwind card

Author:
irahoza daniel

2 months ago

106
Article card

Author:
Sienna

2 years ago

12.3k
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

5 months ago

633
Form
form

Author:
Aman kumar

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components