Home
Mereani Waqa
Stats Showcase Section

Stats Showcase Section

Display key metrics of your product or service beautifully

This tailwind example is contributed by Mereani Waqa, on 28-Nov-2023. 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 Mereani Waqa

5.8k

Fork Fullscreen

<div class="bg-green-50 dark:bg-gray-800 pt-12 sm:pt-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-5xl text-center">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">The Ultimate Data Analytics Platform</h2>
    </div>
  </div>
  <div class="mt-10 bg-white dark:bg-gray-700 pb-12 sm:pb-16">
    <div class="relative">
      <div class="absolute inset-0 h-1/2 bg-green-50 dark:bg-gray-800"></div>
      <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-4xl">
          <dl class="rounded-lg bg-white dark:bg-gray-800 shadow-lg sm:grid sm:grid-cols-3">
            <div class="flex flex-col border-b border-gray-100 dark:border-gray-700 p-6 text-center sm:border-0 sm:border-r">
              <dt class="order-2 mt-2 text-lg font-normal leading-6 text-gray-500 dark:text-gray-300">Data Sources, including APIs and databases</dt>
              <dd class="order-1 text-5xl font-bold tracking-tight text-green-600 dark:text-green-400"><span>30</span>+</dd>
            </div>
            <div class="flex flex-col border-t border-b border-gray-100 dark:border-gray-700 p-6 text-center sm:border-0 sm:border-l sm:border-r">
              <dt class="order-2 mt-2 text-lg font-normal leading-6 text-gray-500 dark:text-gray-300">Analytic Tools and Machine Learning Models</dt>
              <dd class="order-1 text-5xl font-bold tracking-tight text-green-600 dark:text-green-400"><span>100</span>+</dd>
            </div>
            <div class="flex flex-col border-t border-gray-100 dark:border-gray-700 p-6 text-center sm:border-0 sm:border-l">
              <dt class="order-2 mt-2 text-lg font-normal leading-6 text-gray-500 dark:text-gray-300">Real-time Data Streams and Dashboards</dt>
              <dd class="order-1 text-5xl font-bold tracking-tight text-green-600 dark:text-green-400"><span>10</span>+</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Stats section with animated counter
Display important stats of your product

Author:
Dipti narayan

2 years ago

11.2k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Author:
Santos78

2 years ago

12.2k
How does it work Steps example
Dark themed steps section

Author:
Mereani Waqa

2 years ago

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

Author:
Arya

3 years ago

13.1k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

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

1 year ago

895
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

2 years ago

5.4k
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.8k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

7 months ago

798
Info card

Author:
Samuel Dawson

3 years ago

10.2k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.9k
Responsive data cards

Author:
EliteAI Tools

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components