Home
Nomusa Botha
Stats Banner Example

Stats Banner Example

Show your stats proudly

This tailwind example is contributed by Nomusa Botha, on 20-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

Banner Stats

Author Nomusa Botha

Fork Fullscreen

<div class="stats-section py-10 px-5">
  <div
    class="stats-grid z-20 max-w-5xl rounded-xl bg-[#FF6347] dark:bg-[#4B5563] mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 items-center justify-between md:px-10 gap-x-10 py-10 px-5 lg:px-10 gap-y-5">
    <div class="col-span-1 md:col-span-3 lg:col-span-1 flex flex-col items-center justify-center gap-y-3">
      <h2 class="text-3xl md:pb-5 md:text-3xl text-white dark:text-gray-200 font-bold">Join Us to Achieve More</h2>
    </div>
    <div class="col-span-1 md:col-span-1 lg:col-span-1 flex flex-col items-center justify-center gap-y-3">
      <h2 class="text-3xl lg:text-5xl text-white dark:text-gray-200 font-bold">1.2M</h2>
      <p class="text-center text-sm md:text-base text-white dark:text-gray-400">Members worldwide</p>
    </div>
    <div class="col-span-1 md:col-span-1 lg:col-span-1 flex flex-col items-center justify-center gap-y-3">
      <h2 class="text-3xl lg:text-5xl text-white dark:text-gray-200 font-bold">95%</h2>
      <p class="text-center text-sm md:text-base text-white dark:text-gray-400">Customer satisfaction rate</p>
    </div>
    <div class="col-span-1 md:col-span-1 lg:col-span-1 flex flex-col items-center justify-center gap-y-3">
      <h2 class="text-3xl lg:text-5xl text-white dark:text-gray-200 font-bold">3500+</h2>
      <p class="text-center text-sm md:text-base text-white dark:text-gray-400">Transactions processed daily</p>
    </div>
  </div>
</div>

Related Examples

Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

4 weeks ago

185
Info cards
Show various statistics on your website

Author:
Arya

1 year ago

9.3k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

1 year ago

10.4k
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

3 weeks ago

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

Author:
Santiago Hernandez

2 months ago

248
Calender
Calendar component for showing schedule

Author:
Brandon D

1 year ago

6k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

8 months ago

6.4k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

8.3k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

3 weeks ago

263
images

Author:
Maxim Alex

5 months ago

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

Author:
Mereani Waqa

6 months ago

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

Author:
Samuel Dawson

1 year ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent