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

8.1k

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

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

10.2k
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.8k
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
Responsive grid layout

Author:
Kofi Osei

2 years ago

21.1k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.1k
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.4k
Responsive data cards

Author:
EliteAI Tools

5 months ago

1.2k
Responsive Article Section

Author:
Prashant

2 years ago

15.4k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

3 months ago

445
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components