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

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 grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

1 year ago

7.8k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

8.9k
Info Card

Author:
Prem..

2 years ago

18k
Info cards

Author:
Lukas Müller

2 years ago

10.7k
Stats - Big and Bold
display stats of your product

Author:
Pixel Perfect

9 months ago

989
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

9 months ago

1.2k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

2.9k
Stats block
basic stats section

Author:
Simon Scheffer

2 years ago

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

3 months ago

378
Information card

Author:
Samuel Dawson

2 years ago

11.3k
Statastics cards

Author:
Shakti

1 year ago

14k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components