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

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

Author:
Santos78

2 years ago

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

Author:
Mereani Waqa

1 year ago

7.5k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

13.6k
Block Group kpis

Author:
Ranit Saha

9 months ago

523
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

2 years ago

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

1 year ago

4.7k
Stats - Htmlwind
Simple stats

Author:
Htmlwind

4 months ago

502
How does it work?

Author:
Abdul Baset Bappy

3 months ago

310
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

2 years ago

8.5k
Info cards

Author:
Lukas Müller

2 years ago

11.6k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components