Stats Section

The gradient background stats section uses dark shades of gradient change colors according to your website theme

This tailwind example is contributed by Santiago Hernandez, on 28-Apr-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

Stats

Author Santiago Hernandez

Tailwind v3.4 3.7k 12

Fork Fullscreen

<div class="bg-gradient-to-r from-blue-800 to-indigo-900 w-full">
  <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8  lg:py-20">
    <div class="max-w-5xl mx-auto text-center">
      <h2 class="pb-1 text-4xl font-extrabold text-white">TailwindFlex Component Collection</h2>
      <p class="mt-3 text-lg text-white">Discover the latest additions to our stunning Tailwind CSS UI collection!</p>
    </div>
    <dl class="mt-10 text-center sm:max-w-3xl sm:mx-auto sm:grid sm:grid-cols-4 sm:gap-8">
      <div class="flex flex-col">
        <dt class="order-2 mt-2 text-lg leading-6 font-medium text-white">Components</dt>
        <dd class="order-1 text-5xl font-extrabold text-white">1600</dd>
      </div>
      <div class="flex flex-col mt-10 sm:mt-0">
        <dt class="order-2 mt-2 text-lg leading-6 font-medium text-white">Free</dt>
        <dd class="order-1 text-5xl font-extrabold text-white">1600</dd>
      </div>
      <div class="flex flex-col mt-10 sm:mt-0">
        <dt class="order-2 mt-2 text-lg leading-6 font-medium text-white">Dark Mode</dt>
        <dd class="order-1 text-5xl font-extrabold text-white">1200</dd>
      </div>
      <div class="flex flex-col mt-10 sm:mt-0">
        <dt class="order-2 mt-2 text-lg leading-6 font-medium text-white">Categories</dt>
        <dd class="order-1 text-5xl font-extrabold text-white">90</dd>
      </div>
    </dl>
  </div>
</div>

Related Examples

Info cards

Samuel Dawson

3 years ago

11.6k
Info cards
Show various statistics on your website

Arya

4 years ago

12.1k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

11 months ago

671
How does it work?

Abdul Baset Bappy

1 year ago

1.3k
Stats Section Dark

Santiago Hernandez

2 years ago

2.6k
sidebar dash
sidebar dash

Omer fils ELENGA

10 months ago

983
machine
tell you how your MAC pc work

gidy

11 months ago

753
Stats section with animated counter
Display important stats of your product

Dipti narayan

3 years ago

12.1k
Tiles for showing stats

Task Master

3 years ago

13.9k
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
Info cards for admin panel

Sophia Baker

3 years ago

12.9k
Business Statistics Dashboard with Animated Counters
business statistics component featuring animated number counters, percentage growth indicators, and clean metric cards

JUGENDRA GANGWAR

1 week ago

12