Home
Laurits
Info card

Info card

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

Card

Author Laurits

10.8k

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

Author:
Anonymous

2 years ago

11.8k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.1k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

6 months ago

582
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.9k
Confirmation model

Author:
Mr Robot

3 years ago

13.2k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.7k
Chat Bot

Author:
Md. Tofayel islam

6 months ago

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

Author:
irahoza daniel

8 months ago

545
offer card

Author:
ABDO-SY

10 months ago

1.1k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

8 months ago

1.1k
profile3

Author:
pablitodgb

7 months ago

283
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Anonymous

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components