Home
Shakti
Simple responsive cards

Simple responsive cards

This tailwind example is contributed by Shakti, on 23-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Shakti

10k

Fork Fullscreen

<div class="grid gap-8 md:grid-cols-2 lg:gap-12 p-6 md:p-10 mt-12">
    <a href="#"
        class="flex flex-col p-6 space-y-6 transition-all duration-500 bg-white border border-indigo-100 rounded-lg shadow hover:shadow-xl lg:p-8 lg:flex-row lg:space-y-0 lg:space-x-6">
        <div
            class="flex items-center justify-center w-16 h-16 bg-green-100 border border-green-200 rounded-full shadow-inner lg:h-20 lg:w-20">
            <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
                </path>
            </svg>
        </div>
        <div class="flex-1">
            <h5 class="mb-3 text-xl font-bold lg:text-2xl">Compare Plans</h5>
            <p class="mb-6 text-lg text-gray-600">Find out what plan is right for you</p>
            <span class="flex items-baseline text-lg font-bold text-indigo-600">
              View price comparison
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </span>
        </div>
    </a>
    <a href="#"
        class="flex flex-col p-6 space-y-6 transition-all duration-500 bg-white border border-indigo-100 rounded-lg shadow hover:shadow-xl lg:p-8 lg:flex-row lg:space-y-0 lg:space-x-6">
        <div
            class="flex items-center justify-center w-16 h-16 bg-green-100 border border-green-200 rounded-full shadow-inner lg:h-20 lg:w-20">
            <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
                </path>
            </svg>
        </div>
        <div class="flex-1">
            <h5 class="mb-3 text-xl font-bold lg:text-2xl">Need advice?</h5>
            <p class="mb-6 text-lg text-gray-600">Find out what plan is right for you</p>
            <span class="flex items-baseline text-lg font-bold text-indigo-600">
              Contact our professionals
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </span>
        </div>
    </a>
</div>

Related Examples

Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

21.2k
Hover effect card

Author:
Samuel Dawson

2 years ago

31.9k
Info Card
info card with description

Author:
Prashant

3 years ago

12.9k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

64k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

Author:
CodewithFaraz

4 months ago

297
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

3 weeks ago

231
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

7 months ago

561
card Alert - icons - glass

Author:
ABDO-SY

10 months ago

1k
Minimal Profile card

Author:
Abhijit Sen

3 years ago

11.7k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.6k
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

1 year ago

1.1k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

10 months ago

957

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components