Home
Santiago Hernandez
Stats Section Dark

Stats Section Dark

Forked from> @santiago/stats-section-2

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

Fork Fullscreen

<div class="bg-gradient-to-r from-gray-900 to-black 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">Elegant Gradient Stats Section</h2>
      <p class="mt-3 text-lg text-white">Explore the latest updates in our stylish statistics showcase!</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

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

9 months ago

827
Service Metrics cards

Author:
Paul Intay

1 year ago

2.8k
Basic stat cards

Author:
Santos78

2 years ago

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

Author:
Ranit Saha

9 months ago

1.1k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.5k
Showcase Impactfull stats
stats cards with icons

Author:
Carlos

11 months ago

1.3k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

7.9k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.4k
Tiles for showing stats

Author:
Task Master

2 years ago

12.8k
Info card

Author:
Samuel Dawson

2 years ago

10k
Info Card

Author:
Prem..

3 years ago

19.3k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components