Simple responsive cards

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

Tailwind v3.4 10.6k 17

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

Gopi Yadav

3 years ago

22.3k
Hover effect card

Samuel Dawson

3 years ago

33.3k
Info Card
info card with description

Prashant

4 years ago

13.3k
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:

Prashant

4 years ago

65.6k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

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

ABDO-SY

1 year ago

2.5k
Responsive card with image

Simon Scheffer

3 years ago

11.5k
Cards Seaction - Services block

ABDO-SY

1 year ago

2.4k
content section

Crimson

1 year ago

1.6k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
profile3

pablitodgb

1 year ago

1k
Card
Simple Card

Ashraf ali

1 year ago

2.4k