Info card

This tailwind example is contributed by Laurits, on 22-Nov-2022. Component is made with Tailwind v3.4. It is responsive.

Card

Author Laurits

Tailwind v3.4 11.4k 11

Fork Fullscreen

<div class="sm:first:col-span-2 py-14 px-11 rounded-lg max-w-lg" style="background-color: #FFE8D2;">
    <h3 class="mb-4 text-black text-[22px] sm:text-[40px] font-extrabold leading-none">
        <span>Inspiration </span>
    </h3>
    <div class="text-lg text-black leading-[1.8]">
        <p>See how other companies are using Reply, which use cases are there, and how it all works in practice.</p>
    </div>
    <ul class="mt-6 sm:mt-10">
        <li class="pt-2 pb-4 mb-2 last:mb-0 border-b border-black border-solid">
            <a class="flex items-center justify-between text-black hover:text-black text-lg sm:text-xl font-medium"
                href="#">
                <span>Customer stories</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.00002 7.45035e-05L13 7.42506e-05C13.5523 7.45035e-05 14 0.44779 14 1.00007V10.0001C14 10.5524 13.5523 11.0001 13 11.0001C12.4477 11.0001 12 10.5524 12 10.0001V3.41429L1.70712 13.7072L0.292908 12.293L10.5858 2.00007L4.00002 2.00007C3.44773 2.00007 3.00002 1.55236 3.00002 1.00007C3.00002 0.44779 3.44773 7.41663e-05 4.00002 7.45035e-05Z"
                        fill="black"></path>
                </svg>
            </a>
        </li>
        <li class="pt-2 pb-4 mb-2 last:mb-0 border-b border-black border-solid">
            <a class="flex items-center justify-between text-black hover:text-black text-lg sm:text-xl font-medium"
                href="#">
                <span>Cold email templates</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.00002 7.45035e-05L13 7.42506e-05C13.5523 7.45035e-05 14 0.44779 14 1.00007V10.0001C14 10.5524 13.5523 11.0001 13 11.0001C12.4477 11.0001 12 10.5524 12 10.0001V3.41429L1.70712 13.7072L0.292908 12.293L10.5858 2.00007L4.00002 2.00007C3.44773 2.00007 3.00002 1.55236 3.00002 1.00007C3.00002 0.44779 3.44773 7.41663e-05 4.00002 7.45035e-05Z"
                        fill="black"></path>
                </svg>
            </a>
        </li>
        <li class="pt-2 pb-4 mb-2 last:mb-0 border-b border-black border-solid">
            <a class="flex items-center justify-between text-black hover:text-black text-lg sm:text-xl font-medium"
                href="#">
                <span>Subject line generator</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.00002 7.45035e-05L13 7.42506e-05C13.5523 7.45035e-05 14 0.44779 14 1.00007V10.0001C14 10.5524 13.5523 11.0001 13 11.0001C12.4477 11.0001 12 10.5524 12 10.0001V3.41429L1.70712 13.7072L0.292908 12.293L10.5858 2.00007L4.00002 2.00007C3.44773 2.00007 3.00002 1.55236 3.00002 1.00007C3.00002 0.44779 3.44773 7.41663e-05 4.00002 7.45035e-05Z"
                        fill="black">
                    </path>
                </svg>
            </a>
        </li>
    </ul>
</div>

Related Examples

cards
cards with background animation

Anonymous

3 years ago

12.6k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features

Michael Andreuzza

2 years ago

5.7k
Card with Dark Mode
For blog post and e-commerce websites

OmKar Mehta

2 years ago

3k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Nick Girga

1 year ago

1.3k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Anonymous

1 year ago

1.9k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.7k
Card Princing

Raul antonio de la cruz hernandez

9 months ago

388
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.7k
Feature Card

Md. Tofayel islam

2 years ago

2.2k
Simple Profile Card.
Profile page with basic informations

Sedat Kumcu

1 year ago

3.6k