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 v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author Anum Shahana

Tailwind v3.4 1.8k 5

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>