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

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

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

7.8k
Info cards

Author:
Samuel Dawson

2 years ago

10.8k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Information card

Author:
Samuel Dawson

3 years ago

11.9k
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

3.6k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.2k
Calender
Calendar component for showing schedule

Author:
Brandon D

3 years ago

8.2k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Author:
Gidy Official

1 week ago

44
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components