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

Tiles for showing stats

Author:
Task Master

3 years ago

13k
stats

Author:
Raul antonio de la cruz hernandez

2 months ago

137
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

1 year ago

2.1k
Basic stat cards

Author:
Santos78

3 years ago

11.7k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.6k
Food App Web design

Author:
Aitrik Saha

1 year ago

1.9k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Author:
Anum Shahana

1 year ago

1.5k
Call to Action Box

Author:
Aitrik Saha

1 year ago

1.8k
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

1 year ago

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

Author:
Emdadul Islam

1 year ago

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

Author:
Santos78

2 years ago

12.4k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components