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

1.9k

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

Info card

Author:
Samuel Dawson

3 years ago

10.2k
Responsive Features Section

Author:
Abdul Baset Bappy

7 months ago

909
Basic stat cards

Author:
Santos78

2 years ago

11.4k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

1 year ago

1.9k
Info Card

Author:
Prem..

3 years ago

20k
Project stats section

Author:
Carlos

1 year ago

1.4k
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.9k
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

1 year ago

923
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12.1k
Stats block
basic stats section

Author:
Simon Scheffer

3 years ago

10.3k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.5k
CTA banner
Capture the attention of the user with full-width CTA Section

Author:
Anonymous

2 years ago

4.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components