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 v3.4. It is responsive.

Grid

Author Kofi Osei

Tailwind v3.4 11.8k 13

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.

Arya

4 years ago

46.3k
Feature tiles

Nishant Trivedi

3 years ago

15.2k
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.

Alok

3 years ago

62.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Tailwind responsive card grid

Piet Vriend

3 years ago

11.9k
Tailwind product gallery

JaxStone

3 years ago

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

Alok

4 years ago

26.8k
Blog Post List

Carlos

2 years ago

3k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.5k
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Prajwal Hallale

2 years ago

687
Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

33k