Home
Hyun-woo Cho
Data Metrics Showcase

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.

This tailwind example is contributed by Hyun-woo Cho, on 10-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats Grid

Author Hyun-woo Cho

7.8k

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:max-w-none">
      <div class="text-center">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Empowering Businesses Globally</h2>
        <p class="mt-4 text-lg leading-8 text-gray-600">
          Our platform is trusted by organizations worldwide to boost productivity, streamline operations, and enhance
          customer experiences.
        </p>
      </div>
      <dl class="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
        <div class="flex flex-col bg-gray-200/50 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-600">Active Users</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">12,345</dd>
        </div>
        <div class="flex flex-col bg-gray-200/50 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-600">Transactions Today</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">1.23M</dd>
        </div>
        <div class="flex flex-col bg-gray-200/50 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-600">Total Revenue</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">$5.6B</dd>
        </div>
        <div class="flex flex-col bg-gray-200/50 p-8">
          <dt class="text-sm font-semibold leading-6 text-gray-600">Happy Customers</dt>
          <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">98%</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Related Examples

Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

8.8k
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.7k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

9.9k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.8k
Responsive grid layout

Author:
Kofi Osei

2 years ago

20.5k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.9k
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.3k
Responsive data cards

Author:
EliteAI Tools

3 months ago

846
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

3 months ago

916
Card grid for showing features

Author:
Steven Kuhn

2 years ago

10.5k
Metrics overview cards
stat cards

Author:
Quentin Rivers

6 months ago

845

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components