Block Group kpis

This tailwind example is contributed by Ranit Saha, on 13-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Ranit Saha

Tailwind v3.4 1.2k 4

Fork Fullscreen

<div class="grid gap-2 grid-cols-2 sm:grid-cols-4">  
  <div
    class="group block bg-gray-100 dark:bg-slate-600 rounded hover:bg-blue-400 dark:hover:bg-blue-400 relative m-2 p-2 shadow-lg hover:shadow-2xl min-w-[150px]">
    <p class="text-gray-400 text-sm group-hover:text-white">Total Sales</p>
    <p class="absolute text-green-400 text-sm right-3 top-3 group-hover:font-bold group-hover:text-green-700">12.5%</p>
    <p class="text-black font-bold dark:text-white group-hover:text-white">$120,000.43</p>
  </div>
  <div
    class="group block bg-gray-100 dark:bg-slate-600 rounded hover:bg-blue-400 dark:hover:bg-blue-400 relative m-2 p-2 shadow-lg hover:shadow-2xl min-w-[150px]">
    <p class="text-gray-400 text-sm group-hover:text-white">Total Sales</p>
    <p class="absolute text-green-400 text-sm right-3 top-3 group-hover:font-bold group-hover:text-green-700">12.5%</p>
    <p class="text-black font-bold dark:text-white group-hover:text-white">$120,000.43</p>
  </div>
  <div
    class="group block bg-gray-100 dark:bg-slate-600 rounded hover:bg-blue-400 dark:hover:bg-blue-400 relative m-2 p-2 shadow-lg hover:shadow-2xl min-w-[150px]">
    <p class="text-gray-400 text-sm group-hover:text-white">Total Sales</p>
    <p class="absolute text-green-400 text-sm right-3 top-3 group-hover:font-bold group-hover:text-green-700">12.5%</p>
    <p class="text-black font-bold dark:text-white group-hover:text-white">$120,000.43</p>
  </div>
  <div
    class="group block bg-gray-100 dark:bg-slate-600 rounded hover:bg-blue-400 dark:hover:bg-blue-400 relative m-2 p-2 shadow-lg hover:shadow-2xl min-w-[150px]">
    <p class="text-gray-400 text-sm group-hover:text-white">Total Sales</p>
    <p class="absolute text-green-400 text-sm right-3 top-3 group-hover:font-bold group-hover:text-green-700">12.5%</p>
    <p class="text-black font-bold dark:text-white group-hover:text-white">$120,000.43</p>
  </div>
</div>

Related Examples

Info card

Samuel Dawson

3 years ago

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

Anum Shahana

1 year ago

1.8k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
Info cards

Lukas Müller

3 years ago

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

Mereani Waqa

2 years ago

8.7k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Prajwal Hallale

3 years ago

7.9k
machine
tell you how your MAC pc work

gidy

10 months ago

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

Hyun-woo Cho

3 years ago

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

Dika Rahman

2 years ago

2.6k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k
Info cards for admin panel

Sophia Baker

3 years ago

12.8k
Showcase Impactfull stats
stats cards with icons

Carlos

1 year ago

2k