statscountergridtailwindresponsiveanimatedmetricshero-section

Animated Stats Counter Grid

Сетка Tailwind с анимированным счетчиком ключевых метрик. Идеально для hero-секций и дашбордов для отображения KPI.

Prompt

<div class="scroll-reveal stagger-4 grid grid-cols-2 md:grid-cols-4 gap-8 revealed mb-16" id="hero-stats">
  <div class="text-center">
    <div class="text-3xl md:text-4xl font-light text-white mb-2" data-target="2847" data-suffix="">2,847</div>
    <div class="text-sm text-gray-400">Companies Transformed</div>
  </div>
  <div class="text-center">
    <div class="text-3xl md:text-4xl font-light text-white mb-2" data-target="247" data-suffix="%">247%</div>
    <div class="text-sm text-gray-400">Efficiency Increase</div>
  </div>
  <div class="text-center">
    <div class="text-3xl md:text-4xl font-light text-white mb-2" data-target="127" data-prefix="$" data-suffix="M">$127M
    </div>
    <div class="text-sm text-gray-400">Cost Savings</div>
  </div>
  <div class="text-center">
    <div class="md:text-4xl text-3xl font-light text-white mb-2" data-target="43" data-suffix="">43</div>
    <div class="text-sm text-gray-400">Countries Served</div>
  </div>
</div>

All Prompts