Home
Kofi Osei
Tailwind css feature cards

Tailwind css feature cards

This tailwind example is contributed by Kofi Osei, on 06-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Kofi Osei

11.4k

Fork Fullscreen

<div class="bg-gray-50 px-4 mt-16">
    <div class="container mx-auto py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Beautiful Design</h2>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lorem ac
                        odio dignissim cursus sed at velit.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Easy to Use</h2>
                    <p class="text-gray-600">Donec vehicula urna ac ex commodo, ac consequat ipsum aliquam. Duis vel
                        quam nec nunc suscipit lobortis.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Fast Performance</h2>
                    <p class="text-gray-600">Suspendisse tincidunt metus vitae libero auctor, at aliquam purus
                        malesuada. Morbi sit amet lectus non sapien aliquet rutrum.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples