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

1.2k

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

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

Author:
Ranit Saha

6 months ago

790
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.6k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

2.3k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Author:
Anum Shahana

9 months ago

1k
Information card

Author:
Samuel Dawson

2 years ago

11.6k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.4k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

18.9k
Basic stat cards

Author:
Santos78

2 years ago

11k
Tiles for showing stats

Author:
Task Master

2 years ago

12.6k
Info Card

Author:
Prem..

2 years ago

18.9k
Info card

Author:
Samuel Dawson

2 years ago

9.7k
Service Metrics cards

Author:
Paul Intay

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components