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

471

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

Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

2 years ago

10.8k
Information card

Author:
Samuel Dawson

2 years ago

10.7k
Project stats section

Author:
Carlos

3 months ago

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

Author:
Mereani Waqa

1 year ago

4.4k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

1 year ago

9.1k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

2 years ago

11.8k
Info cards for admin panel

Author:
Sophia Baker

1 year ago

10.2k
Tiles for showing stats

Author:
Task Master

1 year ago

11k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

2 months ago

423
Service Metrics cards

Author:
Paul Intay

9 months ago

1.6k
Info cards

Author:
Lukas Müller

1 year ago

10k
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 month ago

360

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components