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

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

11.3k
Stats section with animated counter
Display important stats of your product

Author:
Dipti narayan

2 years ago

11.1k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.8k
Tiles for showing stats

Author:
Task Master

2 years ago

12.8k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.2k
How does it work?

Author:
Abdul Baset Bappy

5 months ago

552
Stats - Htmlwind
Simple stats

Author:
Htmlwind

6 months ago

509
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.7k
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

2 years ago

5.8k
Information card

Author:
Samuel Dawson

3 years ago

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

1 year ago

1.2k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components