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

Daily growth chart
chart for showing data each day of the week

Samuel Dawson

3 years ago

12k
Big stat card
Display your statistics boldly

Nikita

2 years ago

4.5k
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Ranit Saha

1 year ago

2.2k
Info Card

Prem..

3 years ago

20.7k
Service Metrics cards

Paul Intay

2 years ago

3.6k
Progress Bar
A progress bar is a UI element that visually represents the completion status of a task or process. It helps users understand how much of a task has been completed and how much remains. Commonly used in forms, file uploads, loading screens, or multi-step processes, it enhances the user experience by providing clear feedback.

Abhiraj

1 year ago

1.4k
Information card

Samuel Dawson

3 years ago

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

Mereani Waqa

2 years ago

6.4k
Responsive data cards

EliteAI Tools

1 year ago

2.3k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Info cards

Lukas Müller

3 years ago

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

Prajwal Hallale

2 years ago

7k