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

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

3 years ago

11.5k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

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

Author:
Prajwal Hallale

2 years ago

7.9k
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.6k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

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

5.1k
Blog Card

Author:
ariaw

1 month ago

174
Basic stat cards

Author:
Santos78

2 years ago

11.3k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

24k
Luxurious Grid Gallery

Author:
UI-Templates

1 month ago

91
Responsive Features Section

Author:
ariaw

7 months ago

702

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components