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

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

Stats Section Dark

Author:
Santiago Hernandez

1 year ago

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

Author:
Ranit Saha

1 year ago

1.5k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.3k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.5k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.8k
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.3k
Tiles for showing stats

Author:
Task Master

3 years ago

12.9k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k
Information card

Author:
Samuel Dawson

3 years ago

12.1k
Responsive Card Grid with hover animation

Author:
Prashant

3 years ago

19.8k
Responsive data cards

Author:
EliteAI Tools

1 year ago

1.7k
stats

Author:
Raul antonio de la cruz hernandez

1 month ago

132

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components