Home
Kofi Osei
Tailwind responsive features card grid

Tailwind responsive features card grid

with gradient background

This tailwind example is contributed by Kofi Osei, on 13-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author Kofi Osei

11.3k

Fork Fullscreen

<div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
    <div class="mx-auto max-w-3xl px-6 py-12">
        <div class="text-center">
            <h1 class="text-4xl font-bold text-white mb-4">Welcome to the Jungle</h1>
            <p class="text-xl text-white mb-8">Where the adventure begins!

</p>
            <a href="#"
                class="bg-white text-purple-900 py-2 px-4 rounded-full hover:bg-indigo-500 hover:text-white transition duration-300 ease-in-out">Get
                Started
            </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-16">
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-purple-900 mb-4">Explore the Wild</h2>
                <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi
                    blandit, fringilla justo sit amet, mollis enim. Donec volutpat sapien at nunc fermentum, vel aliquam
                    turpis elementum.
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-purple-900 mb-4">Find Hidden Treasures</h2>
                <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi
                    blandit, fringilla justo sit amet, mollis enim. Donec volutpat sapien at nunc fermentum, vel aliquam
                    turpis elementum.
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-purple-900 mb-4">Capture Stunning Photos</h2>
                <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi
                    blandit, fringilla justo sit amet, mollis enim. Donec volutpat sapien at nunc fermentum, vel aliquam
                    turpis elementum.
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-bold text-purple-900 mb-4">Connect with Nature</h2>
                <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi
                    blandit, fringilla justo sit amet, mollis enim. Donec volutpat sapien at nunc fermentum, vel aliquam
                    turpis elementum.
                </p>
            </div>
        </div>
    </div>
</div>

Related Examples

Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

43.5k
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.9k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

59.7k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.3k
Responsive grid example

Author:
Charlotte Dupont

2 years ago

12.7k
Responsive data cards

Author:
EliteAI Tools

9 months ago

1.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

1.8k
SimpleGrid

Author:
wtfbrh

8 months ago

735
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.3k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

10.9k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

18.4k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

2 years ago

6.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components