Component:
Stats Technology Modern

Name: Stats Technology Modern
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Stats Page Section Social Proof Technology Modern
Colors:
Description:
This carefully crafted Stats component is perfect for Technology landing pages, featuring a Modern 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: Technology
@style: Modern
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->

<style>
  .gradient-text {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .stats-grid {
    background-image:
      linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
  }
</style>

<section class="bg-neutral-900 text-white relative overflow-hidden stats-grid py-24">
  <!-- Background Elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 bg-amber-400/10 rounded-full blur-3xl"
      style="animation-delay: -3s;"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-6 lg:px-8">
    <!-- Header -->
    <div class="text-center mb-16">
      <div class="inline-flex items-center px-4 py-2 bg-amber-500/10 border border-amber-500/20 rounded-full mb-6">
        <svg class="w-4 h-4 text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path
            d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
        </svg>
        <span class="text-amber-400 text-sm font-medium">Real-Time Analytics</span>
      </div>

      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
        <span class="text-neutral-100">Numbers That</span>
        <br>
        <span class="gradient-text">Speak for Themselves</span>
      </h2>

      <p class="text-xl text-neutral-300 max-w-2xl mx-auto">
        Join thousands of companies worldwide that trust our platform to power their digital transformation.
      </p>
    </div>

    <!-- Featured Stats Cards -->
    <div class="grid md:grid-cols-2 gap-8">
      <!-- Performance Card -->
      <div class="bg-neutral-800/50 backdrop-blur-sm border border-neutral-700/50 rounded-2xl p-8">
        <div class="flex items-center space-x-4 mb-6">
          <div
            class="w-14 h-14 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center">
            <svg class="w-7 h-7 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-bold text-neutral-100">Performance Metrics</h3>
            <p class="text-neutral-400">Real-time system statistics</p>
          </div>
        </div>

        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-neutral-300">API Success Rate</span>
            <span class="text-amber-400 font-bold">99.99%</span>
          </div>
          <div class="w-full bg-neutral-700/50 rounded-full h-2">
            <div class="h-full bg-gradient-to-r from-amber-500 to-amber-600 rounded-full"
              style="width: 99.99%;"></div>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-neutral-300">Server Capacity</span>
            <span class="text-amber-400 font-bold">67%</span>
          </div>
          <div class="w-full bg-neutral-700/50 rounded-full h-2">
            <div class="h-full bg-gradient-to-r from-amber-500 to-amber-600 rounded-full"
              style="width: 67%; animation-delay: 0.2s;"></div>
          </div>

          <div class="flex items-center justify-between">
            <span class="text-neutral-300">Data Processing</span>
            <span class="text-amber-400 font-bold">89%</span>
          </div>
          <div class="w-full bg-neutral-700/50 rounded-full h-2">
            <div class="h-full bg-gradient-to-r from-amber-500 to-amber-600 rounded-full"
              style="width: 89%; animation-delay: 0.4s;"></div>
          </div>
        </div>
      </div>

      <!-- Growth Card -->
      <div class="bg-neutral-800/50 backdrop-blur-sm border border-neutral-700/50 rounded-2xl p-8">
        <div class="flex items-center space-x-4 mb-6">
          <div
            class="w-14 h-14 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center">
            <svg class="w-7 h-7 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
              </path>
            </svg>
          </div>
          <div>
            <h3 class="text-2xl font-bold text-neutral-100">Growth Analytics</h3>
            <p class="text-neutral-400">Monthly performance trends</p>
          </div>
        </div>

        <div class="grid grid-cols-3 gap-4">
          <div class="text-center p-4 bg-neutral-900/50 rounded-xl">
            <div class="text-2xl font-bold gradient-text mb-1">+42%</div>
            <div class="text-xs text-neutral-400">User Growth</div>
          </div>
          <div class="text-center p-4 bg-neutral-900/50 rounded-xl">
            <div class="text-2xl font-bold gradient-text mb-1">+68%</div>
            <div class="text-xs text-neutral-400">Revenue</div>
          </div>
          <div class="text-center p-4 bg-neutral-900/50 rounded-xl">
            <div class="text-2xl font-bold gradient-text mb-1">+31%</div>
            <div class="text-xs text-neutral-400">Engagement</div>
          </div>
        </div>

        <div class="mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-xl">
          <div class="flex items-center space-x-3">
            <svg class="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd" />
            </svg>
            <div>
              <div class="font-semibold text-green-400">All targets exceeded</div>
              <div class="text-sm text-neutral-400">Q4 2024 Performance</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Stats Technology Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
