Steps Software Minimal

This carefully crafted Steps component is perfect for Software landing pages, featuring a Minimal 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: Software
@style: Minimal
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.steps-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.steps-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.steps-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.steps-grid {
position: relative;
}
.steps-list {
display: grid;
grid-template-columns: 1fr;
gap: 3rem 2rem;
list-style: none;
}
@media (min-width: 1024px) {
.steps-list {
grid-template-columns: repeat(4, 1fr);
}
}
.step-item {
position: relative;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
}
.step-circle {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
border: 2px solid var(--color-indigo-600);
background-color: var(--color-white);
font-size: 1.25rem;
font-weight: 600;
color: var(--color-indigo-600);
position: relative;
z-index: 10;
}
.step-content {
margin-top: 1.5rem;
text-align: center;
}
.step-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.step-description {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--color-gray-600);
}
</style>
<section class="steps-section" aria-labelledby="steps-heading">
<div class="container">
<!-- Section Header -->
<div class="steps-header">
<span class="header-badge">Getting Started</span>
<h2 id="steps-heading" class="header-title">
Start streamlining your business in four simple steps
</h2>
<p class="header-description">
Our straightforward implementation process gets you up and running quickly, with minimal disruption to your daily operations
</p>
</div>
<!-- Steps Grid -->
<div class="steps-grid">
<ol class="steps-list">
<!-- Step 1 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
1
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Schedule a demo</h3>
<p class="step-description">
Book a personalized demo with our small business specialists to see how our software addresses your specific needs.
</p>
</div>
</li>
<!-- Step 2 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
2
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Customize your setup</h3>
<p class="step-description">
Our team will help configure the software to match your existing workflows and business processes.
</p>
</div>
</li>
<!-- Step 3 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
3
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Import your data</h3>
<p class="step-description">
We'll handle the migration of your existing data with our secure import tools and validation processes.
</p>
</div>
</li>
<!-- Step 4 -->
<li class="step-item">
<!-- Step number -->
<div class="step-number">
<div class="step-circle">
4
</div>
</div>
<!-- Step content -->
<div class="step-content">
<h3 class="step-title">Go live with support</h3>
<p class="step-description">
Launch with confidence knowing our dedicated support team is available to help you every step of the way.
</p>
</div>
</li>
</ol>
</div>
</div>
</section>
<!--
@type: Steps
@industry: Software
@style: Minimal
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="steps-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Getting Started</span>
<h2 id="steps-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Start streamlining your business in four simple steps
</h2>
<p class="mt-4 text-lg text-gray-600">
Our straightforward implementation process gets you up and running quickly, with minimal disruption to your daily operations
</p>
</div>
<!-- Steps Grid -->
<div class="relative">
<ol class="grid grid-cols-1 gap-y-12 gap-x-8 lg:grid-cols-4">
<!-- Step 1 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
1
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Schedule a demo</h3>
<p class="mt-2 text-base text-gray-600">
Book a personalized demo with our small business specialists to see how our software addresses your specific needs.
</p>
</div>
</li>
<!-- Step 2 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
2
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Customize your setup</h3>
<p class="mt-2 text-base text-gray-600">
Our team will help configure the software to match your existing workflows and business processes.
</p>
</div>
</li>
<!-- Step 3 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
3
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Import your data</h3>
<p class="mt-2 text-base text-gray-600">
We'll handle the migration of your existing data with our secure import tools and validation processes.
</p>
</div>
</li>
<!-- Step 4 -->
<li class="relative lg:col-span-1">
<!-- Step number -->
<div class="flex items-center justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full border-2 border-indigo-600 bg-white text-xl font-semibold text-indigo-600 relative z-10">
4
</div>
</div>
<!-- Step content -->
<div class="mt-6 text-center">
<h3 class="text-lg font-medium text-gray-900">Go live with support</h3>
<p class="mt-2 text-base text-gray-600">
Launch with confidence knowing our dedicated support team is available to help you every step of the way.
</p>
</div>
</li>
</ol>
</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