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

1.1k

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

Metrics overview cards
stat cards

Author:
Quentin Rivers

2 months ago

471
Info cards for admin panal

Author:
Sophia Baker

2 years ago

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

Author:
Arya

2 years ago

10.8k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

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

Author:
Dika Rahman

2 months ago

423
Stats Section Dark

Author:
Santiago Hernandez

7 months ago

1.1k
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 month ago

360
Basic stat cards

Author:
Santos78

1 year ago

10k
Stats block
basic stats section

Author:
Simon Scheffer

1 year ago

9.1k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

7.8k
Big stat card
Display your statistics boldly

Author:
Nikita

10 months ago

2.4k
Info card

Author:
Samuel Dawson

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components