Feature overview cards

The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

This tailwind example is contributed by Nikita, on 16-Jan-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us,Info, Show info, Statistics

Feature showcase Stats Grid

Author Nikita

Tailwind v3.4 5.8k 8

Fork Fullscreen

<div class="bg-white dark:bg-gray-900 h-screen">
    <div class="container mx-auto py-16 dark:text-white">
        <div class="text-center">
            <h2 class="font-bold text-2xl md:text-4xl my-4">What is included in the AI Tool Service?</h2>
            <div class="max-w-2xl md:max-w-4xl mx-auto dark:text-gray-300">
                <p>
                    Our AI Tool Service encompasses a comprehensive analysis with over 50 modules, examining more than
                    200 data points. We offer 5 distinct functionalities and support 4 different file formats.
                </p>
            </div>
        </div>
        <div class="grid grid-cols-2 mx-auto max-w-xl md:max-w-2xl gap-4 my-4">
            <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                <div class="text-4xl font-bold">150<span class="text-yellow-500">+</span></div>
                <div class="text-300 text-uppercase">Features Analyzed</div>
            </div>
            <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                <div class="text-4xl font-bold">60<span class="text-teal-500">+</span></div>
                <div class="text-300 text-uppercase">Modules</div>
            </div>
            <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                <div class="text-4xl font-bold">5<span class="text-pink-500">+</span></div>
                <div class="text-300 text-uppercase">Functionalities</div>
            </div>
            <div class="p-4 border flex flex-col items-center rounded max-w-sm dark:bg-gray-800">
                <div class="text-4xl font-bold">4<span class="text-violet-500">+</span></div>
                <div class="text-300 text-uppercase">File Formats Supported</div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Alok

4 years ago

26.7k
Responsive Card Grid with hover animation

Prashant

4 years ago

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

Prajwal Hallale

3 years ago

7k
Feature showcase cards

Lukas Müller

3 years ago

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

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Features grid

Sophia Baker

3 years ago

10.9k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
Feature cards

Fagundo67

3 years ago

11.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k