Home
EliteAI Tools
Responsive data cards

Responsive data cards

This tailwind example is contributed by EliteAI Tools, on 06-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats Grid

Author EliteAI Tools

Fork Fullscreen

<section class="p-4">
  <h2 class="mb-4 text-base font-bold text-gray-900 sm:text-lg">
    Tools by Category
  </h2>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Productivity
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    791
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Business
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    644
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Content Generation
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    472
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Developer Tools
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    413
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Marketing
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    409
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Education
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    270
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Image Generator
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    268
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Data Analysis
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    247
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Design
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    228
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Customer Support
            </h3>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Writing
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    180
                    tools
                </span>
            </div>
          </div>

<div class="flex-grow ml-6">
            <h3
              class="text-lg font-semibold text-gray-900 transition-colors duration-200 line-clamp-1 group-hover:text-green-600">
              Education Assistant
            </h3>

<div class="inline-flex items-center mt-1">
              <span class="text-gray-600 rounded">
                    173
                    tools
                </span>
            </div>
          </div>

Related Examples

Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.4k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

9.1k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

1 year ago

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

7.3k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

8.1k
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
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

11 months ago

3.9k
Feature cards

Author:
Fagundo67

1 year ago

10k
Customer testimonies grid

Author:
Sameer Sultana

1 year ago

16.8k
Feature Highlights cards

Author:
Carla Hoffman

9 months ago

1.6k
Big stat card
Display your statistics boldly

Author:
Nikita

11 months ago

2.5k
Tailwind product gallery

Author:
JaxStone

1 year ago

23.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components