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

Info cards

Author:
Lukas Müller

2 years ago

11.6k
Block Group kpis

Author:
Ranit Saha

10 months ago

641
Info card

Author:
Samuel Dawson

2 years ago

10k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.5k
Responsive data cards

Author:
EliteAI Tools

10 months ago

1.5k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.2k
Metrics overview cards
stat cards

Author:
Quentin Rivers

1 year ago

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

Author:
Arya

3 years ago

12k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

5 months ago

509
machine
tell you how your MAC pc work

Author:
gidy

1 week ago

49
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

10 months ago

856

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components