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

3 years ago

43.7k
Feature tiles

Author:
Nishant Trivedi

2 years ago

14k
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

60k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.4k
Tailwind products list

Author:
Isabella Kowalski

2 years ago

13.5k
Responsive landscape cards

Author:
Piet Vriend

2 years ago

10.2k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

12.2k
Blog Card

Author:
ariaw

2 weeks ago

42
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

3 years ago

24.8k
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:
Amit Pachange

3 years ago

51.5k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

3 months ago

388
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components