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.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

24k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Author:
Developer Kwame

1 year ago

2.1k
Tailwind card

Author:
Conan Hilton

2 years ago

13.3k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

1 month ago

326
Blog Author Card

Author:
EliteAI Tools

11 months ago

1.2k
Info cards

Author:
Samuel Dawson

2 years ago

10.9k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

8 months ago

352
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

7 months ago

794
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

4 months ago

451
Horizontal card with image

Author:
Amit Pachange

3 years ago

14.9k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

6 months ago

652

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components