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

405

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

Information card

Author:
Samuel Dawson

2 years ago

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

Author:
Mereani Waqa

1 year ago

7.4k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

9.9k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.3k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

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

10 months ago

1.1k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

11.9k
Project stats section

Author:
Carlos

1 year ago

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

Author:
Dika Rahman

11 months ago

1.5k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components