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

12k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.4k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

4 months ago

788
delivary
using cars and carts

Author:
Bonimater

9 months ago

1.1k
sticky headings
sticky headings

Author:
Anonymous

2 years ago

6.3k
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

1 year ago

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

Author:
Ayyamperumal S

11 months ago

1.5k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Author:
Md. Tofayel islam

2 years ago

2.9k
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

2 years ago

4.1k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

3 years ago

10.6k
card bento

Author:
Raul antonio de la cruz hernandez

2 months ago

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

Author:
saim-t8

6 months ago

616

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components