Home
Nikita
Feature overview cards

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 CSS v3. 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

3.9k

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.

Author:
Alok

2 years ago

20k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

17.3k
Feature showcase cards

Author:
Lukas Müller

1 year ago

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

1 year ago

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

2 years ago

45.8k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.2k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.5k
Features grid

Author:
Sophia Baker

1 year ago

8.7k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

13.5k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

9.1k
Feature cards

Author:
Fagundo67

1 year ago

10k
Features section
Showcase your key features

Author:
Manon Daniel

1 year ago

14.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components