Home
Anum Shahana
Stats or Metrics Overview

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

This tailwind example is contributed by Anum Shahana, on 30-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Anum Shahana

1.2k

Fork Fullscreen

<div class="p-4 md:p-6 text-white bg-[#212529]">
        <div class="flex flex-wrap">
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-gray-200 px-12">
              <h2 class="text-4xl text-[#909294] md:text-5xl font-semibold text-center">
                2+
              </h2>
              <p class=" mb-2 text-center">Years Experiance</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="lg:border-r border-gray-200 px-12">
              <h2 class="text-4xl text-[#909294] md:text-5xl  font-semibold text-center">
                10+
              </h2>
              <p class=" mb-2 text-center">Happy Clients</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-gray-200 px-12">
              <h2 class="text-4xl text-[#909294] md:text-5xl  font-semibold text-center">
                20+
              </h2>
              <p class=" mb-2 text-center">Projects Done</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="px-12">
              <h2 class="text-4xl text-[#909294] md:text-5xl  font-semibold text-center">
                10+
              </h2>
              <p class=" mb-2 text-center">Get Awards</p>
            </div>
          </div>
        </div>
      </div>

Related Examples

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

Author:
Samuel Dawson

2 years ago

11.3k
Information card

Author:
Samuel Dawson

3 years ago

11.9k
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.5k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

10.2k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

2.7k
Basic stat cards

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

7.8k
Info cards

Author:
Samuel Dawson

2 years ago

10.8k
Service Metrics cards

Author:
Paul Intay

1 year ago

3k
Info Card

Author:
Prem..

3 years ago

19.5k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.5k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components