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

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

5k
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

11.5k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

3.4k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.6k
Bento grids

Author:
Maxim

1 year ago

21.1k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

3 months ago

455

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components