Home
Pixel Perfect
Stats - Big and Bold

Stats - Big and Bold

display stats of your product

This tailwind example is contributed by Pixel Perfect, on 17-Jun-2024. 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 Pixel Perfect

1.3k

Fork Fullscreen

<body class="bg-gray-100 text-gray-900 transition duration-500">
  <div class="justify-center flex flex-wrap p-8">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg py-8">
      <div class="flex flex-wrap">
        <div class="px-6 relative w-full lg:w-4/12 md:w-6/12 w-full border-r border-gray-200 dark:border-gray-700">
          <div class="text-center py-2">
            <h4 class="text-5xl font-extrabold leading-tight dark:text-white">500+</h4>
            <h5 class="text-xl font-semibold mt-2 mb-1 dark:text-gray-200">Components</h5>
            <p class="text-gray-500 dark:text-gray-400 text-md">Everything you need to build your website, from start to
              finish.
            </p>
          </div>
        </div>
        <div class="px-6 relative w-full lg:w-4/12 md:w-6/12 w-full border-r border-gray-200 dark:border-gray-700">
          <div class="text-center py-2">
            <h4 class="text-5xl font-extrabold leading-tight dark:text-white">100+</h4>
            <h5 class="text-xl font-semibold mt-2 mb-1 dark:text-gray-200">Templates</h5>
            <p class="text-gray-500 dark:text-gray-400 text-md">Pre-designed templates to kickstart your project.</p>
          </div>
        </div>
        <div class="px-6 relative w-full lg:w-4/12 md:w-6/12 w-full">
          <div class="text-center py-2">
            <h4 class="text-5xl font-extrabold leading-tight dark:text-white">50+</h4>
            <h5 class="text-xl font-semibold mt-2 mb-1 dark:text-gray-200">Pages</h5>
            <p class="text-gray-500 dark:text-gray-400 text-md">Ready-to-use pages for various purposes.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Related Examples

Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

18.7k
Tiles for showing stats

Author:
Task Master

2 years ago

12.5k
Block Group kpis

Author:
Ranit Saha

6 months ago

383
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

8 months ago

1k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

9.9k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9.1k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.2k
Basic stat cards

Author:
Santos78

2 years ago

10.9k
Info Card

Author:
Prem..

2 years ago

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

Author:
Abhiraj

6 months ago

580
Metrics overview cards
stat cards

Author:
Quentin Rivers

9 months ago

1.1k
How does it work?

Author:
Abdul Baset Bappy

3 weeks ago

124

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components