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

671

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

Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

9.6k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

7 months ago

798
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Author:
Gidy Official

1 month ago

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

Author:
Mereani Waqa

2 years ago

5.8k
Tiles for showing stats

Author:
Task Master

2 years ago

12.9k
Responsive Features Section

Author:
Abdul Baset Bappy

6 months ago

906
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

1 year ago

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

Author:
Dika Rahman

1 year ago

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

Author:
Mereani Waqa

2 years ago

7.9k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.9k
Project stats section

Author:
Carlos

1 year ago

1.4k
Statastics cards

Author:
Shakti

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components