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

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

8k
Info card

Author:
Samuel Dawson

3 years ago

10.2k
Stats block
basic stats section

Author:
Simon Scheffer

3 years ago

10.4k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.4k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k
Project stats section

Author:
Carlos

1 year ago

1.5k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

3k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

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

925
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components