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

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

Calender
Calendar component for showing schedule

Author:
Brandon D

2 years ago

7.7k
Block Group kpis

Author:
Ranit Saha

4 months ago

276
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

1 year ago

8k
Project stats section

Author:
Carlos

8 months ago

858
Info cards

Author:
Lukas Müller

2 years ago

11k
Service Metrics cards

Author:
Paul Intay

1 year ago

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

Author:
Ranit Saha

4 months ago

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

Author:
Arya

2 years ago

11.6k
Information card

Author:
Samuel Dawson

2 years ago

11.6k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

2 years ago

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

4 months ago

420
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components