Home
Ranit Saha
Block Group kpis

Block Group kpis

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

Stats

Author Ranit Saha

401

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

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.

Author:
Hyun-woo Cho

1 year ago

8.4k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

1 year ago

6.8k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.6k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.3k
Project stats section

Author:
Carlos

11 months ago

944
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.4k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Info cards

Author:
Lukas Müller

2 years ago

11.5k
Info Card

Author:
Prem..

2 years ago

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

Author:
Prajwal Hallale

2 years ago

7.8k
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.4k
Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components