Component:
Stats Fintech Glassmorphism
Colors:
Description:
This carefully crafted Stats component is perfect for Fintech landing pages, featuring a Glassmorphic 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: Fintech
@style: Glassmorphism
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<section
class="relative py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10 container mx-auto px-4">
<div class="text-center mb-20 space-y-8">
<div class="inline-block">
<span
class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>📊 Platform Statistics</span
>
</div>
<h2 class="text-5xl md:text-7xl font-bold leading-tight">
<span
class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
>Numbers That</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Speak Volumes</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our platform's performance metrics showcase the scale, reliability, and
trust that thousands of businesses place in our financial infrastructure
every day.
</p>
</div>
<div class="mb-20">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-dollar-sign w-6 h-6"
>
<line x1="12" x2="12" y1="2" y2="22"></line>
<path
d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>45%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>$50B+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Transaction Volume
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Total value processed through our platform monthly
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Growth this quarter
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 5%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-users w-6 h-6"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>32%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>2,500,000+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Active Users
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Businesses and individuals using our platform daily
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
New users this month
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 100%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-globe w-6 h-6"
>
<circle cx="12" cy="12" r="10"></circle>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>15%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>180+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Global Reach
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Countries where our services are available
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
New markets this year
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 18%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-zap w-6 h-6"
>
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>60%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>0.3s</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Processing Speed
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Average transaction processing time
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Faster than industry average
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 0.03%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-shield w-6 h-6"
>
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>5%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>99.99%</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Security Score
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Fraud prevention and security effectiveness
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Improvement this year
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 9.999%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-clock w-6 h-6"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>2%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>99.98%</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Uptime
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Platform availability and reliability
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Above SLA target
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 9.998%"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-20">
<div
class="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-8 max-w-6xl mx-auto"
>
<h3 class="text-3xl font-bold text-center text-white mb-8">
Industry Comparison
</h3>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Processing Speed</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>0.3s</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[95%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">3.2s</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[30%]"
></div>
</div>
</div>
</div>
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Success Rate</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>99.99%</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[100%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">97.5%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[75%]"
></div>
</div>
</div>
</div>
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Cost Efficiency</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>75%</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[90%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">45%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[45%]"
></div>
</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
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS 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