Component:
Steps Fintech Glassmorphism
Colors:
Description:
This carefully crafted Steps 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: Steps
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content, Sale
@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"
>🚀 Getting Started</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"
>Simple Steps to</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Get Started</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Launch your financial operations in minutes, not months. Our streamlined
onboarding process gets you up and running with enterprise-grade
capabilities from day one.
</p>
</div>
<div class="mb-20">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
1
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">2 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-400"
>
<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-user-plus 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>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Create Your Account
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-200 group-hover:text-gray-300"
>
Sign up in minutes with our streamlined onboarding process
and get instant access to our platform.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Secure email verification</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Identity verification (KYC)</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Choose your account type</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Set up security preferences</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
2
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">5 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-400"
>
<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-credit-card w-6 h-6"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Connect Your Payment Methods
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
Link your bank accounts, cards, and digital wallets to start
processing payments immediately.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Bank account verification</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Add credit/debit cards</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Connect digital wallets</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Set up payment preferences</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
3
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">10 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-400"
>
<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-settings w-6 h-6"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Configure Your Settings
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
Customize your dashboard, set up notifications, and
configure your business rules and preferences.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Dashboard customization</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Notification preferences</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Business rule configuration</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>API key generation</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
4
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">1 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-400"
>
<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-rocket w-6 h-6"
>
<path
d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
></path>
<path
d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Start Processing
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
You're all set! Begin processing payments, managing
transactions, and growing your business with our platform.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Process your first payment</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Access real-time analytics</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Explore advanced features</span
>
</div>
<div class="flex items-start space-x-3">
<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-circle-check-big w-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Get 24/7 support access</span
>
</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