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

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

Statistics card section

Author:
Laurits

2 years ago

16.6k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

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

Author:
Mereani Waqa

1 year ago

5.2k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

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

Author:
Mereani Waqa

1 year ago

6.9k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Author:
Arya

2 years ago

11.7k
Daily growth chart
chart for showing data each day of the week

Author:
Samuel Dawson

2 years ago

10.7k
ExtraLarge stats section

Author:
Manon Daniel

2 years ago

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

1 year ago

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

5 months ago

957
Info card for admin panal
Show stats on your dashboard

Author:
Arya

2 years ago

12.5k
Project stats section

Author:
Carlos

9 months ago

922

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components