Home
Santiago Hernandez
Stats Section

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Stats

Author Santiago Hernandez

2.7k

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

Block Group kpis

Author:
Ranit Saha

10 months ago

641
Information card

Author:
Samuel Dawson

3 years ago

11.9k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

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

Author:
Gidy Official

1 week ago

44
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

10 months ago

1.4k
Info card

Author:
Samuel Dawson

2 years ago

10k
Statastics cards

Author:
Shakti

2 years ago

14.6k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

1.7k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Info cards

Author:
Samuel Dawson

2 years ago

10.8k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

10.2k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

3 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components