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

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

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

2 years ago

8.7k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

3 years ago

12.3k
Information cards for admin panal
Stats cards

Author:
Brandon D

3 years ago

10.8k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.5k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

2.1k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

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

Author:
Prajwal Hallale

2 years ago

7.9k
stats

Author:
Raul antonio de la cruz hernandez

1 month ago

134
Tiles for showing stats

Author:
Task Master

3 years ago

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

1 year ago

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

Author:
Ranit Saha

1 year ago

1.5k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components