Stats Banner Example

Show your stats proudly

This tailwind example is contributed by Nomusa Botha, on 20-Jun-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Banner Stats

Author Nomusa Botha

Tailwind v3.4 2.8k 12

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

AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

322
Calender
Calendar component for showing schedule

Brandon D

4 years ago

8.9k
stats

Raul antonio de la cruz hernandez

9 months ago

412
Banner - Hero - Splash Section

ABDO-SY

1 year ago

1.9k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Andrew Hughes

3 years ago

10.3k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Prajwal Hallale

3 years ago

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

Samuel Dawson

3 years ago

12k
Banner Slider

JUGENDRA GANGWAR

2 months ago

382
Block Group kpis

Ranit Saha

1 year ago

1.2k
Info cards

Lukas Müller

3 years ago

12.2k
Stats Section Dark

Santiago Hernandez

2 years ago

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

Prajwal Hallale

3 years ago

7k