Card

Cards are implemented with no custom CSS classes - 100% Tailwind!
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
    <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
        <div class="flex-shrink-0">
            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
        </div>

        <div class="flex-1 bg-white p-6 flex flex-col justify-between">
            <div class="flex-1">
                <a href="#" class="block mt-2">
                    <p class="text-xl font-semibold text-gray-900">Boost your conversion rate</p>
                    <p class="mt-3 text-base text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.</p>
                </a>
            </div>

            <div class="mt-6">
                <a class="btn btn-primary" href="#">Read more</a>
            </div>
        </div>
    </div>

    <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
        <div class="flex-shrink-0">
            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
        </div>
        
        <div class="flex-1 bg-white p-6 flex flex-col justify-between">
            <div class="flex-1">
                <a href="#" class="block mt-2">
                    <p class="text-xl font-semibold text-gray-900">How to use search engine optimization to drive sales</p>
                    <p class="mt-3 text-base text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.</p>
                </a>
            </div>

            <a class="btn btn-primary mt-6" href="#">Read more</a>
        </div>
    </div>

    <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
        <div class="flex-shrink-0">
            <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
        </div>

        <div class="flex-1 bg-white p-6 flex flex-col justify-between">
            <div class="flex-1">
                <a href="#" class="block mt-2">
                    <p class="text-xl font-semibold text-gray-900">Improve your customer experience</p>
                    <p class="mt-3 text-base text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.</p>
                </a>
            </div>

            <a class="link" href="#">Read more</a>
        </div>
    </div>
</div>
Tabs
Figures