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

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

1 year ago

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

Author:
Santos78

1 year ago

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

Author:
Mereani Waqa

1 year ago

6.5k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

9.4k
Information card

Author:
Samuel Dawson

2 years ago

11.3k
Info cards

Author:
Lukas Müller

2 years ago

10.7k
Service Metrics cards

Author:
Paul Intay

1 year ago

2.1k
Stats or Metrics Overview
Highlight your achievements with our Stats Section, featuring key metrics such as years of experience, happy clients, completed projects, and awards. This visually engaging component effectively communicates your expertise and success at a glance

Author:
Anum Shahana

5 months ago

812
Big stat card
Display your statistics boldly

Author:
Nikita

1 year ago

2.9k
Statastics cards

Author:
Shakti

1 year ago

14k
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.3k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

18.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components