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

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

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

7 months ago

695
Responsive Features Section

Author:
Abdul Baset Bappy

1 month ago

393
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.2k
Stats Section Dark

Author:
Santiago Hernandez

1 year ago

1.5k
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.4k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

1 year ago

6.8k
How does it work?

Author:
Abdul Baset Bappy

1 month ago

244
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

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

Author:
Dika Rahman

10 months ago

1.4k
Tiles for showing stats

Author:
Task Master

2 years ago

12.6k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.6k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components