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

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