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

2.2k

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

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

2 years ago

6.9k
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

3k
Banner with Form

Author:
Aitrik Saha

1 year ago

1.5k
Basic stat cards

Author:
Santos78

2 years ago

11.7k
Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

1 year ago

2k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

2 years ago

6k
Hero

Author:
ORGIN_DREAMS

9 months ago

1.2k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

5 months ago

565
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.5k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.7k
Information card

Author:
Samuel Dawson

3 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components