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

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

Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

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

9 months ago

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

Author:
Dipti narayan

2 years ago

10.9k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Tiles for showing stats

Author:
Task Master

2 years ago

12.8k
Info cards

Author:
Lukas Müller

2 years ago

11.6k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

5 months ago

503
Project stats section

Author:
Carlos

1 year ago

1.2k
Info Card

Author:
Prem..

3 years ago

19.5k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
How does it work Steps example
Dark themed steps section

Author:
Mereani Waqa

1 year ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components