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

1.5k

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

11.3k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

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

Author:
Prajwal Hallale

2 years ago

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

2 years ago

8.5k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

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

2 years ago

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

1 year ago

4.7k
Info Card

Author:
Prem..

3 years ago

19.3k
Responsive grid layout

Author:
Kofi Osei

2 years ago

21.7k
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

9 months ago

1.1k
Customer testimonies grid

Author:
Sameer Sultana

2 years ago

19.8k
Card grid for posts

Author:
Mr Robot

2 years ago

21.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components