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

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 cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

2 years ago

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

9 months ago

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

Author:
Anonymous

1 year ago

4.5k
Block Group kpis

Author:
Ranit Saha

9 months ago

523
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.3k
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

3.9k
Responsive Features Section

Author:
Abdul Baset Bappy

3 months ago

792
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.2k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

4 months ago

502
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

2 years ago

11k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

7.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components