Component:
Stats SaaS Playful

Name: Stats SaaS Playful
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Stats Page Section Social Proof SaaS Playful
Colors:
Description:
This carefully crafted Stats component is perfect for SaaS landing pages, featuring a Playful design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.

                <!--
@type: Stats
@industry: SaaS
@style: Playful
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
  body {
    font-family: 'Inter', sans-serif;
  }
  .circle-animate {
    transition: stroke-dasharray 1.4s ease;
  }
</style>

<section class="bg-stone-50 relative overflow-hidden py-20">
  <!-- Decorative Blobs -->
  <div class="absolute top-20 left-10 w-72 h-72 bg-amber-200 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div>
  <div class="absolute bottom-20 right-10 w-96 h-96 bg-amber-300 rounded-full mix-blend-multiply filter blur-xl opacity-20"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-8">
      <div class="inline-flex items-center bg-amber-100 text-amber-700 text-sm font-bold px-4 py-2 rounded-full mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
          <path d="M3 3v18h18" />
          <path d="m19 9-5 5-4-4-3 3" />
        </svg>
        Numbers That Speak Volumes
      </div>
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 mb-6">
        The Results
        <span class="relative inline-block">
          <span class="text-amber-500">Speak for Themselves</span>
          <svg class="absolute -bottom-6 left-0 w-full" viewBox="0 0 200 12" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 10 Q 50 2, 100 6 T 198 10" stroke="#f59e0b" stroke-width="2" fill="none"
              stroke-linecap="round" />
          </svg>
        </span>
      </h2>
      <p class="text-xl text-stone-600 leading-relaxed">
        Real data from real teams doing real work. No fluff, no exaggeration - just the facts.
      </p>
    </div>

    <!-- Industry Stats -->
    <div class="bg-white rounded-3xl shadow-xl border-2 border-stone-200 p-8">
      <div class="text-center mb-8">
        <h3 class="text-3xl font-extrabold text-stone-900 mb-3">Industry-Leading Performance</h3>
        <p class="text-stone-600 text-lg">How we compare to traditional tools</p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="text-center">
          <div class="relative inline-block mb-4">
            <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 36 36">
              <path class="text-stone-200" stroke="currentColor" stroke-width="3" fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
              <path class="text-amber-500 circle-animate" stroke="currentColor" stroke-width="3" fill="none"
                data-percentage="90"
                stroke-dasharray="0,100"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <span class="text-2xl font-extrabold text-stone-900">90%</span>
            </div>
          </div>
          <div class="text-stone-700 font-semibold">Faster Onboarding</div>
        </div>

        <div class="text-center">
          <div class="relative inline-block mb-4">
            <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 36 36">
              <path class="text-stone-200" stroke="currentColor" stroke-width="3" fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
              <path class="text-amber-500 circle-animate" stroke="currentColor" stroke-width="3" fill="none"
                data-percentage="85"
                stroke-dasharray="0,100"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <span class="text-2xl font-extrabold text-stone-900">85%</span>
            </div>
          </div>
          <div class="text-stone-700 font-semibold">Lower Costs</div>
        </div>

        <div class="text-center">
          <div class="relative inline-block mb-4">
            <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 36 36">
              <path class="text-stone-200" stroke="currentColor" stroke-width="3" fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
              <path class="text-amber-500 circle-animate" stroke="currentColor" stroke-width="3" fill="none"
                data-percentage="95"
                stroke-dasharray="0,100"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <span class="text-2xl font-extrabold text-stone-900">95%</span>
            </div>
          </div>
          <div class="text-stone-700 font-semibold">User Satisfaction</div>
        </div>

        <div class="text-center">
          <div class="relative inline-block mb-4">
            <svg class="w-24 h-24 transform -rotate-90" viewBox="0 0 36 36">
              <path class="text-stone-200" stroke="currentColor" stroke-width="3" fill="none"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
              <path class="text-amber-500 circle-animate" stroke="currentColor" stroke-width="3" fill="none"
                data-percentage="80"
                stroke-dasharray="0,100"
                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
            </svg>
            <div class="absolute inset-0 flex items-center justify-center">
              <span class="text-2xl font-extrabold text-stone-900">80%</span>
            </div>
          </div>
          <div class="text-stone-700 font-semibold">Less Training Time</div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const circles = document.querySelectorAll(".circle-animate");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const el = entry.target;
          const value = el.getAttribute("data-percentage");
          el.style.strokeDasharray = `${value}, 100`;
        }
      });
    }, { threshold: 0.4 });

    circles.forEach(circle => observer.observe(circle));
  });
</script>
Stats SaaS Playful

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
