Home
Dipti narayan
Stats section with animated counter

Stats section with animated counter

Display important stats of your product

This tailwind example is contributed by Dipti narayan, on 06-Sep-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 Dipti narayan

11.2k

Fork Fullscreen

<div class="h-screen dark:bg-gray-900">
  <div class="pt-12 bg-gray-50 dark:bg-gray-900 sm:pt-20">
    <div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-3xl font-extrabold leading-9 text-gray-900 dark:text-white sm:text-4xl sm:leading-10">
          Trusted by developers
        </h2>
        <p class="mt-3 text-xl leading-7 text-gray-600 dark:text-gray-400 sm:mt-4">
          This package powers many production applications on many different hosting platforms.
        </p>
      </div>
    </div>
    <div class="pb-12 mt-10 bg-gray-50 dark:bg-gray-900 sm:pb-16">
      <div class="relative">
        <div class="absolute inset-0 h-1/2 bg-gray-50 dark:bg-gray-900"></div>
        <div class="relative max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
          <div class="max-w-4xl mx-auto">
            <dl class="bg-white dark:bg-gray-800 rounded-lg shadow-lg sm:grid sm:grid-cols-3">
              <div
                class="flex flex-col p-6 text-center border-b border-gray-100 dark:border-gray-700 sm:border-0 sm:border-r">
                <dt class="order-2 mt-2 text-lg font-medium leading-6 text-gray-500 dark:text-gray-400" id="item-1">
                  Stars on GitHub
                </dt>
                <dd class="order-1 text-5xl font-extrabold leading-none text-indigo-600 dark:text-indigo-100"
                  aria-describedby="item-1" id="starsCount">
                  0
                </dd>
              </div>
              <div
                class="flex flex-col p-6 text-center border-t border-b border-gray-100 dark:border-gray-700 sm:border-0 sm:border-l sm:border-r">
                <dt class="order-2 mt-2 text-lg font-medium leading-6 text-gray-500 dark:text-gray-400">
                  Downloads
                </dt>
                <dd class="order-1 text-5xl font-extrabold leading-none text-indigo-600 dark:text-indigo-100"
                  id="downloadsCount">
                  0
                </dd>
              </div>
              <div
                class="flex flex-col p-6 text-center border-t border-gray-100 dark:border-gray-700 sm:border-0 sm:border-l">
                <dt class="order-2 mt-2 text-lg font-medium leading-6 text-gray-500 dark:text-gray-400">
                  Sponsors
                </dt>
                <dd class="order-1 text-5xl font-extrabold leading-none text-indigo-600 dark:text-indigo-100"
                  id="sponsorsCount">
                  0
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// Find the maximum count among all targets
  const maxCount = Math.max(...targets.map(target => target.count));

// Function to animate count-up effect
  function animateCountUp(target, duration) {
    let currentCount = 0;
    const increment = Math.ceil(target.count / (duration / 10));

// Animate count-up for each target with adjusted duration
  targets.forEach(target => {
    animateCountUp(target, maxCount / 100); // Adjust duration based on max count
  });
</script>

Related Examples

Tailwind stat cards
Highlight key statistics

Author:
Anonymous

2 years ago

10.5k
Statistics card section

Author:
Laurits

3 years ago

17.8k
Stats Showcase Section
Display key metrics of your product or service beautifully

Author:
Mereani Waqa

2 years ago

5.9k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

2 years ago

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

Author:
Mereani Waqa

2 years ago

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

2 months ago

226
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

3 years ago

10.5k
Service Metrics cards

Author:
Paul Intay

1 year ago

3.1k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

2k
Statastics cards

Author:
Shakti

2 years ago

14.8k
Information card

Author:
Samuel Dawson

3 years ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components