Home
Quentin Rivers
Metrics overview cards

Metrics overview cards

stat cards

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Quentin Rivers

835

Fork Fullscreen

<div class="container mx-auto p-6">
  
  <h1 class="text-3xl font-bold text-gray-800 mb-6">Dashboard Overview</h1>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Total Users</h2>
      <p class="text-3xl font-bold text-blue-600">10,492</p>
      <p class="text-sm text-gray-500 mt-2">↑ 12% from last month</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Revenue</h2>
      <p class="text-3xl font-bold text-green-600">$84,320</p>
      <p class="text-sm text-gray-500 mt-2">↑ 8% from last month</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Active Projects</h2>
      <p class="text-3xl font-bold text-purple-600">23</p>
      <p class="text-sm text-gray-500 mt-2">↓ 2 from last month</p>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Tasks Completed</h2>
      <p class="text-3xl font-bold text-orange-600">1,342</p>
      <p class="text-sm text-gray-500 mt-2">↑ 18% from last month</p>
    </div>
  </div>
</div>

Related Examples

Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

2 years ago

10.6k
Responsive data cards

Author:
EliteAI Tools

3 months ago

795
Stats Section Dark

Author:
Santiago Hernandez

11 months ago

1.4k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

2 months ago

555
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

5 months ago

955
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

2.9k
Info cards

Author:
Lukas Müller

2 years ago

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

1 year ago

7.8k
Calender
Calendar component for showing schedule

Author:
Brandon D

2 years ago

7.6k
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

3 months ago

374
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
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components