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

10.9k

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

41.4k
Feature tiles

Author:
Nishant Trivedi

1 year ago

12.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

56.6k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

15.5k
Blog items skeleton

Author:
Nii Anyetei

9 months ago

1.8k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9k
img grid layout
here is image grid layout

Author:
nahid hasan

2 months ago

586
Card animate

Author:
Raul antonio de la cruz hernandez

4 months ago

621
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

18.5k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

1 year ago

5.9k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

18.1k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components