Stats Sections Tailwind CSS

Heading with four stats

Right next to heading and description here one can display four key stats

Preview
Code

                                                <section class="py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div
            class="rounded-2xl py-10 px-10 xl:py-16 xl:px-20 bg-gray-50 flex items-center justify-between flex-col gap-16 lg:flex-row">
            <div class="w-full lg:w-60">
              <h2
                class="font-manrope text-4xl font-bold text-gray-900 mb-4 text-center lg:text-left"
              >
                Our Stats
              </h2>
              <p class="text-sm text-gray-500 leading-6 text-center lg:text-left">
                We help you to unleash the power within your business
              </p>
            </div>
            <div class="w-full lg:w-4/5">
              <div
                class="flex flex-col flex-1 gap-10 lg:gap-0 lg:flex-row lg:justify-between"
              >
                <div class="block">
                  <div
                    class="font-manrope font-bold text-4xl text-indigo-600 mb-3 text-center lg:text-left"
                  >
                    260+
                  </div>
                  <span class="text-gray-900 text-center block lg:text-left"
                    >Expert Consultants
                  </span>
                </div>
                <div class="block">
                  <div
                    class="font-manrope font-bold text-4xl text-indigo-600 mb-3 text-center lg:text-left"
                  >
                    975+
                  </div>
                  <span class="text-gray-900 text-center block lg:text-left"
                    >Active Clients
                  </span>
                </div>
                <div class="block">
                  <div
                    class="font-manrope font-bold text-4xl text-indigo-600 mb-3 text-center lg:text-left"
                  >
                    724+
                  </div>
                  <span class="text-gray-900 text-center block lg:text-left"
                    >Projects Delivered</span
                  >
                </div>
                <div class="block">
                  <div
                    class="font-manrope font-bold text-4xl text-indigo-600 mb-3 text-center lg:text-left"
                  >
                    89+
                  </div>
                  <span class="text-gray-900 text-center block lg:text-left"
                    >Orders in Queue</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>

HTML Copy

Simple stats page

Display four simple stats, data and numbers with heading below.

Preview
Code

Figma File

                                                <section class="py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div
            class="flex flex-col flex-1 gap-10 lg:gap-0 lg:flex-row lg:justify-between">
            <div class="w-full lg:w-1/4 border-b pb-10 lg:border-b-0 lg:pb-0 lg:border-r border-gray-100">
              <div
                class="font-manrope font-bold text-5xl text-gray-900 mb-5 text-center ">
                260+
              </div>
              <span class="text-xl text-gray-500 text-center block ">Expert Consultants
              </span>
            </div>
            <div class="w-full lg:w-1/4 border-b pb-10 lg:border-b-0 lg:pb-0 lg:border-r border-gray-100">
              <div
                class="font-manrope font-bold text-5xl text-gray-900 mb-5 text-center ">
                975+
              </div>
              <span class="text-xl text-gray-500 text-center block ">Active Clients
              </span>
            </div>
            <div class="w-full lg:w-1/4 border-b pb-10 lg:border-b-0 lg:pb-0 lg:border-r border-gray-100">
              <div
                class="font-manrope font-bold text-5xl text-gray-900 mb-5 text-center ">
                724+
              </div>
              <span class="text-xl text-gray-500 text-center block ">Projects Delivered
              </span>
            </div>
            <div class="w-full lg:w-1/4  ">
              <div
                class="font-manrope font-bold text-5xl text-gray-900 mb-5 text-center ">
                89+
              </div>
              <span class="text-xl text-gray-500 text-center block ">Orders in Queue
              </span>
            </div>
          </div>
        </div>
    </section>

HTML Copy

Stats with custom colour

Highlight stats with custom colours and mention description below each stat as shown in the following tailwind stats component.

Preview
Code

Figma File

                                                <section class="py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div
            class="flex flex-col gap-10 xl:gap-14 lg:flex-row lg:justify-between">
            <div class="w-full lg:w-1/3 ">
              <div
                class="font-manrope font-bold text-5xl text-indigo-600 mb-6 text-center ">
                13M+
              </div>
              <p class="text-lg text-gray-500 leading-7 text-center">We have reach more than 13 millions user in around the world</p>
            </div>
            <div class="w-full lg:w-1/3 ">
              <div
                class="font-manrope font-bold text-5xl text-indigo-600 mb-6 text-center ">
                50M+
              </div>
              <p class="text-lg text-gray-500 leading-7 text-center">Pagedone is one of most downloaded on google play store & apple store</p>
            </div>
            <div class="w-full lg:w-1/3 ">
              <div
                class="font-manrope font-bold text-5xl text-indigo-600 mb-6 text-center ">
                98%
              </div>
              <p class="text-lg text-gray-500 leading-7 text-center">Our user are satisfied using our services  in their daily site</p>
            </div>
          </div>
        </div>
    </section>

HTML Copy

Stats with indicators

Differentiate stats by showing different indicator alongside each of the stats.

Preview
Code

Figma File

Stats with border

It is pretty similar to the above style, the only difference will be instead of indicator here borders will be kept with different stats.

Preview
Code

Figma File

Stats with brand logos

With brand logos and border you can showcase different stats for different clients.

Preview
Code

Figma File

Stats with custom icon

Put different icons for different stats to make it easier for visitors to understand.

Preview
Code

Figma File

Tailwind Stats Card

Display stats in card layout with different icons and heading.

Preview
Code

Figma File

Stats with background

Here one can use background colour in card layout style and keep heading below each stat.

Preview
Code

Figma File

Stats with creative design

Show numbers in style, use card layout and use different colour as background. This makes the page look more attractive.

Preview
Code

Figma File

Horizontal stats

Show numbers and stats horizontally and keep icons next to each of the statistics.

Preview
Code

Figma File

Stats with horizontal description

Using the following Tailwind CSS Stats you can show stats, heading and description horizontally.

Preview
Code

Figma File

Stats with icon background

This tailwind css stats can be used to add background to custom icons of stats with heading.

Preview
Code

Figma File

Split with heading

Mention heading and description with CTA buttons on the other half of the stats.

Preview
Code

Figma File

Vertical stats

This Tailwind Stats card Show stats vertically with numbers in bold, description and heading.

Preview
Code

Figma File