Responsive data cards

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

Stats Grid

Author EliteAI Tools

Tailwind v3.4 2.3k 9

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

Arya

4 years ago

12.1k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

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

Prajwal Hallale

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

Hyun-woo Cho

3 years ago

9.1k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Andrew Hughes

3 years ago

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

Prajwal Hallale

3 years ago

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

Nikita

2 years ago

5.8k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
Tailwind product gallery

JaxStone

3 years ago

28k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
Responsive Features Section

ariaw

1 year ago

1.7k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

5.5k