Component:
Free Steps SaaS Modern
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Steps component is perfect for SaaS 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: Steps
@industry: SaaS
@style: Modern
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<style>
.gradient-text {
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-pulse {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
<section class="bg-zinc-50 text-zinc-900 relative py-24 px-6 overflow-hidden">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-20 left-10 w-96 h-96 bg-rose-500/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-rose-600/5 rounded-full blur-3xl"
style="animation-delay: 2s;"></div>
</div>
<div class="relative max-w-7xl mx-auto animate-fadeInUp">
<div class="text-center mb-16">
<div
class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-white/50 backdrop-blur-sm border border-zinc-200 rounded-full">
<svg class="w-4 h-4 text-rose-500" 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" />
</svg>
<span class="text-sm font-semibold gradient-text">How It Works</span>
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 mb-6">
Behind the Scenes of<br>
<span class="gradient-text">Your Data Story</span>
</h2>
<p class="text-xl text-zinc-600 max-w-3xl mx-auto">
Ever wondered how raw data becomes actionable insights? Let's pull back the curtain
and show you the magic that powers your decisions.
</p>
</div>
<!-- Process Flow Diagram -->
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative">
<!-- Step 1: Data Collection -->
<div class="relative">
<div class="text-center mb-6">
<div class="relative inline-block">
<div class="absolute inset-0 bg-rose-500/20 rounded-2xl blur-xl"></div>
<div
class="relative w-20 h-20 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl mx-auto flex items-center justify-center shadow-2xl shadow-rose-500/40">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
</svg>
</div>
</div>
</div>
<div
class="bg-white rounded-2xl border border-zinc-200 p-6 shadow-lg hover:shadow-2xl hover:border-rose-500 transition-all">
<div class="text-sm font-bold text-rose-600 mb-2">STEP 1</div>
<h3 class="text-xl font-bold text-zinc-900 mb-3">Data Collection</h3>
<p class="text-zinc-600 text-sm leading-relaxed">
We securely gather data from all your sources—databases, spreadsheets, APIs, and more.
</p>
</div>
</div>
<!-- Step 2: Processing -->
<div class="relative">
<div class="text-center mb-6">
<div class="relative inline-block">
<div class="absolute inset-0 bg-rose-500/20 rounded-2xl blur-xl"></div>
<div
class="relative w-20 h-20 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl mx-auto flex items-center justify-center shadow-2xl shadow-rose-500/40"
style="animation-delay: 0.5s;">
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
</div>
</div>
<div
class="bg-white rounded-2xl border border-zinc-200 p-6 shadow-lg hover:shadow-2xl hover:border-rose-500 transition-all">
<div class="text-sm font-bold text-rose-600 mb-2">STEP 2</div>
<h3 class="text-xl font-bold text-zinc-900 mb-3">AI Processing</h3>
<p class="text-zinc-600 text-sm leading-relaxed">
Our AI cleans, organizes, and analyzes your data to find patterns and insights.
</p>
</div>
</div>
<!-- Step 3: Visualization -->
<div class="relative">
<div class="text-center mb-6">
<div class="relative inline-block">
<div class="absolute inset-0 bg-rose-500/20 rounded-2xl blur-xl"></div>
<div
class="relative w-20 h-20 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl mx-auto flex items-center justify-center shadow-2xl shadow-rose-500/40"
style="animation-delay: 1s;">
<svg class="w-10 h-10 text-white" 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" />
</svg>
</div>
</div>
</div>
<div
class="bg-white rounded-2xl border border-zinc-200 p-6 shadow-lg hover:shadow-2xl hover:border-rose-500 transition-all">
<div class="text-sm font-bold text-rose-600 mb-2">STEP 3</div>
<h3 class="text-xl font-bold text-zinc-900 mb-3">Visualization</h3>
<p class="text-zinc-600 text-sm leading-relaxed">
Transform complex data into beautiful, interactive charts and dashboards.
</p>
</div>
</div>
<!-- Step 4: Action -->
<div class="relative">
<div class="text-center mb-6">
<div class="relative inline-block">
<div class="absolute inset-0 bg-rose-500/20 rounded-2xl blur-xl"></div>
<div
class="relative w-20 h-20 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl mx-auto flex items-center justify-center shadow-2xl shadow-rose-500/40"
style="animation-delay: 1.5s;">
<svg class="w-10 h-10 text-white" 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" />
</svg>
</div>
</div>
</div>
<div
class="bg-white rounded-2xl border border-zinc-200 p-6 shadow-lg hover:shadow-2xl hover:border-rose-500 transition-all">
<div class="text-sm font-bold text-rose-600 mb-2">STEP 4</div>
<h3 class="text-xl font-bold text-zinc-900 mb-3">Take Action</h3>
<p class="text-zinc-600 text-sm leading-relaxed">
Make confident decisions backed by real-time insights and drive measurable results.
</p>
</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