Business Statistics Dashboard with Animated Counters

business statistics component featuring animated number counters, percentage growth indicators, and clean metric cards

This tailwind example is contributed by JUGENDRA GANGWAR, on 05-Nov-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats

Author JUGENDRA GANGWAR

Tailwind v3.4 3

Fork Fullscreen

<section data-stats-component class="mx-auto w-full max-w-6xl px-5 py-14 sm:py-20">
  <div class="mx-auto max-w-2xl text-center">
    <span class="inline-flex rounded-full bg-emerald-50 px-4 py-2 text-xs font-bold uppercase tracking-wider text-emerald-700">Our Impact</span>
    <h2 class="mt-5 text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl">Numbers that speak for themselves.</h2>
    <p class="mt-4 text-sm leading-7 text-slate-500 sm:text-base">A closer look at the growth, trust and impact we've built together.</p>
  </div>

<div class="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <article class="group rounded-3xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-indigo-200 hover:shadow-xl hover:shadow-indigo-100/50">
      <div class="flex items-center justify-between">
        <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 transition group-hover:bg-indigo-600 group-hover:text-white">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a4 4 0 0 0-5.5-3.72M17 20H7m10 0v-2c0-.7-.18-1.36-.5-1.93M7 20H2v-2a4 4 0 0 1 5.5-3.72M7 20v-2c0-.7.18-1.36.5-1.93m0 0a5 5 0 0 1 9 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM7 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
        </span>
        <span class="rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">↑ 24.8%</span>
      </div>
      <p class="mt-8 text-sm font-medium text-slate-500">Happy Customers</p>
      <div class="mt-2 flex items-baseline gap-1">
        <span data-count data-target="12500" data-duration="1800" class="text-4xl font-bold tracking-tight text-slate-900">0</span>
        <span class="text-2xl font-bold text-slate-900">+</span>
      </div>
      <p class="mt-3 text-xs text-slate-400">Compared to last year</p>
    </article>

<article class="group rounded-3xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-200 hover:shadow-xl hover:shadow-violet-100/50">
      <div class="flex items-center justify-between">
        <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-50 text-violet-600 transition group-hover:bg-violet-600 group-hover:text-white">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M8 16v-4m4 4V8m4 8v-6"/></svg>
        </span>
        <span class="rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">↑ 18.2%</span>
      </div>
      <p class="mt-8 text-sm font-medium text-slate-500">Projects Completed</p>
      <div class="mt-2 flex items-baseline gap-1">
        <span data-count data-target="850" data-duration="1600" class="text-4xl font-bold tracking-tight text-slate-900">0</span>
        <span class="text-2xl font-bold text-slate-900">+</span>
      </div>
      <p class="mt-3 text-xs text-slate-400">Successfully delivered</p>
    </article>

<article class="group rounded-3xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-amber-200 hover:shadow-xl hover:shadow-amber-100/50">
      <div class="flex items-center justify-between">
        <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-50 text-amber-600 transition group-hover:bg-amber-500 group-hover:text-white">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m12 3 2.7 5.47 6.03.88-4.36 4.25 1.03 6.01L12 16.77l-5.4 2.84 1.03-6.01-4.36-4.25 6.03-.88L12 3Z"/></svg>
        </span>
        <span class="rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">↑ 12.5%</span>
      </div>
      <p class="mt-8 text-sm font-medium text-slate-500">Average Rating</p>
      <div class="mt-2 flex items-baseline gap-1">
        <span data-count data-target="49" data-decimals="1" data-duration="1400" class="text-4xl font-bold tracking-tight text-slate-900">0</span>
        <span class="text-2xl font-bold text-slate-900">/5</span>
      </div>
      <p class="mt-3 text-xs text-slate-400">Based on customer reviews</p>
    </article>

<article class="group rounded-3xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-100/50">
      <div class="flex items-center justify-between">
        <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 transition group-hover:bg-emerald-600 group-hover:text-white">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg>
        </span>
        <span class="rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">↑ 32.4%</span>
      </div>
      <p class="mt-8 text-sm font-medium text-slate-500">Countries Reached</p>
      <div class="mt-2 flex items-baseline gap-1">
        <span data-count data-target="28" data-duration="1200" class="text-4xl font-bold tracking-tight text-slate-900">0</span>
        <span class="text-2xl font-bold text-slate-900">+</span>
      </div>
      <p class="mt-3 text-xs text-slate-400">Global business presence</p>
    </article>
  </div>

<div class="mt-8 flex flex-col items-center justify-between gap-3 rounded-2xl bg-slate-50 px-6 py-5 text-center sm:flex-row sm:text-left">
    <div>
      <p class="text-sm font-semibold text-slate-800">Growing stronger every day.</p>
      <p class="mt-1 text-xs text-slate-500">Thank you for being part of our journey.</p>
    </div>
    <span class="inline-flex items-center gap-2 text-xs font-semibold text-emerald-600">
      <span class="h-2 w-2 animate-pulse rounded-full bg-emerald-500"></span>
      Continuous growth
    </span>
  </div>
</section>

function animateCounter(counter){
    const target=Number(counter.dataset.target);
    const decimals=Number(counter.dataset.decimals||0);
    const duration=Number(counter.dataset.duration||1500);

if(reducedMotion){
      counter.textContent=target.toFixed(decimals);
      return;
    }

const start=performance.now();

function update(now){
      const progress=Math.min((now-start)/duration,1);
      const eased=1-Math.pow(1-progress,4);
      const value=target*eased;
      counter.textContent=value.toFixed(decimals);

if(progress<1){
        requestAnimationFrame(update);
      }else{
        counter.textContent=target.toFixed(decimals);
      }
    }

requestAnimationFrame(update);
  }

function startCounters(){
    if(started)return;
    started=true;
    counters.forEach(animateCounter);
  }

if("IntersectionObserver" in window){
    const observer=new IntersectionObserver(entries=>{
      entries.forEach(entry=>{
        if(entry.isIntersecting){
          startCounters();
          observer.disconnect();
        }
      });
    },{threshold:0.25});
    observer.observe(component);
  }else{
    startCounters();
  }
});

</script>

Related Examples

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.

Prajwal Hallale

3 years ago

7k
About us section with Stats

JUGENDRA GANGWAR

2 weeks ago

33
Daily growth chart
chart for showing data each day of the week

Samuel Dawson

3 years ago

12k
Showcase Impactfull stats
stats cards with icons

Carlos

2 years ago

2.1k
Info cards
Show various statistics on your website

Arya

4 years ago

12.1k
Info cards for admin panel

Sophia Baker

3 years ago

12.9k
Info cards for admin panal

Sophia Baker

3 years ago

10.5k
ExtraLarge stats section

Manon Daniel

3 years ago

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

Santos78

3 years ago

12.9k
Calender
Calendar component for showing schedule

Brandon D

4 years ago

8.9k
Stats Section Dark

Santiago Hernandez

2 years ago

2.6k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.8k