Component:
Free Stats Artificial Intelligence Corporate
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Stats component is perfect for Artificial Intelligence landing pages, featuring a Corporate 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: Artificial Intelligence
@style: Corporate
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<style>
.slide-in {
animation: slide-in 0.8s ease-out forwards;
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.delay-1 {
animation-delay: 0.2s;
opacity: 0;
}
.delay-2 {
animation-delay: 0.4s;
opacity: 0;
}
.delay-3 {
animation-delay: 0.6s;
opacity: 0;
}
.delay-4 {
animation-delay: 0.8s;
opacity: 0;
}
.gradient-text {
background: linear-gradient(135deg, #059669 0%, #0891b2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.grid-pattern {
background-image: radial-gradient(rgba(6, 182, 212, 0.15) 1px, transparent 1px);
background-size: 10px 10px;
}
.stat-number {
animation: countUp 1s ease-out forwards;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<section class="bg-white text-slate-900 relative py-20 overflow-hidden grid-pattern">
<!-- Background Elements -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-20 left-10 w-72 h-72 bg-emerald-400/20 rounded-full mix-blend-multiply filter blur-3xl">
</div>
<div class="absolute bottom-40 right-10 w-96 h-96 bg-cyan-400/20 rounded-full mix-blend-multiply filter blur-3xl">
</div>
<div
class="absolute top-1/2 left-1/2 w-80 h-80 bg-emerald-300/20 rounded-full mix-blend-multiply filter blur-3xl">
</div>
</div>
<!-- Content Container -->
<div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<div
class="slide-in inline-flex items-center space-x-2 bg-gradient-to-r from-emerald-50 to-cyan-50 border border-emerald-300 rounded-full px-4 py-2">
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-600/75"></span>
<span class="text-sm font-medium text-emerald-700">Proven Impact</span>
</div>
<h2 class="slide-in delay-1 text-4xl lg:text-6xl font-medium text-slate-900">
Numbers That Tell
<span class="gradient-text block mt-2 pb-3">Our Success Story</span>
</h2>
<p class="slide-in delay-2 text-lg text-slate-600 leading-relaxed">
Real metrics from real companies achieving extraordinary results with our AI platform.
</p>
</div>
<!-- Main Stats Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
<!-- Stat 1 -->
<div
class="slide-in delay-2 bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl hover:border-emerald-400 transition-all duration-300 text-center group">
<div
class="w-16 h-16 bg-gradient-to-br from-emerald-100 to-cyan-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
</path>
</svg>
</div>
<div class="stat-number text-4xl font-bold gradient-text mb-2">2,500+</div>
<div class="text-slate-900 font-semibold mb-1">Active Customers</div>
<div class="text-sm text-slate-500">Across 45 countries</div>
</div>
<!-- Stat 2 -->
<div
class="slide-in delay-2 bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl hover:border-cyan-400 transition-all duration-300 text-center group">
<div
class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-emerald-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z">
</path>
</svg>
</div>
<div class="stat-number text-4xl font-bold gradient-text mb-2">10M+</div>
<div class="text-slate-900 font-semibold mb-1">AI Requests Daily</div>
<div class="text-sm text-slate-500">Processing at scale</div>
</div>
<!-- Stat 3 -->
<div
class="slide-in delay-3 bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl hover:border-emerald-400 transition-all duration-300 text-center group">
<div
class="w-16 h-16 bg-gradient-to-br from-emerald-100 to-cyan-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="stat-number text-4xl font-bold gradient-text mb-2">0.3s</div>
<div class="text-slate-900 font-semibold mb-1">Average Response</div>
<div class="text-sm text-slate-500">Lightning fast AI</div>
</div>
<!-- Stat 4 -->
<div
class="slide-in delay-3 bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl hover:border-cyan-400 transition-all duration-300 text-center group">
<div
class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-emerald-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
</path>
</svg>
</div>
<div class="stat-number text-4xl font-bold gradient-text mb-2">4.9/5</div>
<div class="text-slate-900 font-semibold mb-1">Customer Rating</div>
<div class="text-sm text-slate-500">From 1,200 reviews</div>
</div>
</div>
<!-- Industry Stats -->
<div class="slide-in delay-4 grid md:grid-cols-3 gap-8 mb-16">
<div class="bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<h4 class="text-lg font-bold text-slate-900">Time Reduction</h4>
<div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Data Processing</span>
<span class="font-semibold text-emerald-600">85%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Report Generation</span>
<span class="font-semibold text-emerald-600">92%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 92%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Decision Making</span>
<span class="font-semibold text-emerald-600">78%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 78%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<h4 class="text-lg font-bold text-slate-900">Cost Savings</h4>
<div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
</div>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Labor Costs</span>
<span class="font-semibold text-cyan-600">65%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-cyan-500 to-emerald-500 h-3 rounded-full" style="width: 65%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Error Reduction</span>
<span class="font-semibold text-cyan-600">89%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-cyan-500 to-emerald-500 h-3 rounded-full" style="width: 89%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Infrastructure</span>
<span class="font-semibold text-cyan-600">71%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-cyan-500 to-emerald-500 h-3 rounded-full" style="width: 71%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-slate-300 rounded-2xl p-8 hover:shadow-xl transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<h4 class="text-lg font-bold text-slate-900">Productivity Boost</h4>
<div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-600" 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>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Team Output</span>
<span class="font-semibold text-emerald-600">340%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 100%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Task Completion</span>
<span class="font-semibold text-emerald-600">285%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-600">Customer Satisfaction</span>
<span class="font-semibold text-emerald-600">156%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3">
<div class="bg-gradient-to-r from-emerald-500 to-cyan-500 h-3 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page