Component:
Steps Business Modern
Colors:
Description:
This carefully crafted Steps component is perfect for Business 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: Business
@style: Modern
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-50: #eef2ff;
--color-indigo-100: #e0e7ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-white: #ffffff;
/* Spacing */
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
}
/* Reset */
* {
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";
}
/* Component styles */
.process-section {
background-color: var(--color-slate-50);
padding: var(--spacing-16) var(--spacing-4);
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
}
.section-header {
text-align: center;
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-12) auto;
}
.section-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem; /* text-lg */
color: var(--color-slate-600);
}
.steps-grid {
display: grid;
gap: var(--spacing-8);
}
.step-card {
position: relative;
}
.step-content {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: var(--spacing-6);
border: 1px solid var(--color-slate-200);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
height: 100%;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
background-color: var(--color-indigo-100);
color: var(--color-indigo-600);
font-weight: 700;
font-size: 1.25rem;
margin-bottom: var(--spacing-6);
}
.step-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 0.75rem;
}
.step-description {
color: var(--color-slate-600);
margin-bottom: var(--spacing-4);
}
.arrow-connector {
display: none;
position: absolute;
top: 50%;
right: -1.5rem;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
color: var(--color-indigo-600);
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--spacing-4);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
font-weight: 500;
transition: background-color 0.2s;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-indigo-700);
}
.btn-secondary {
background-color: var(--color-white);
color: var(--color-indigo-600);
border: 1px solid var(--color-indigo-600);
}
.btn-secondary:hover {
background-color: var(--color-indigo-50);
}
.btn-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
/* Responsive styles */
@media (min-width: 640px) {
.process-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.cta-buttons {
flex-direction: row;
}
}
@media (min-width: 768px) {
.section-title {
font-size: 2.25rem; /* text-4xl */
}
.steps-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-6);
}
.step-content {
padding: var(--spacing-8);
}
}
@media (min-width: 1024px) {
.process-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
.steps-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-12);
}
.arrow-connector {
display: block;
}
}
</style>
<section class="process-section">
<div class="container">
<!-- Section header -->
<div class="section-header">
<h2 class="section-title">How Our Process Works</h2>
<p class="section-description">We've refined our business consulting approach into a simple, effective four-step process that delivers consistent results for organizations of all sizes.</p>
</div>
<!-- Process steps -->
<div class="steps-grid">
<!-- Step 1 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">1</div>
<h3 class="step-title">Discovery Session</h3>
<p class="step-description">We begin with a comprehensive analysis of your business goals, challenges, and current operations to identify key opportunities.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">2</div>
<h3 class="step-title">Strategic Planning</h3>
<p class="step-description">Based on our findings, we develop a customized roadmap with actionable strategies tailored to your specific business needs.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">3</div>
<h3 class="step-title">Implementation</h3>
<p class="step-description">Our team works alongside yours to execute the strategic plan, providing guidance and support throughout the process.</p>
</div>
<!-- Arrow connector -->
<div class="arrow-connector">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 4 -->
<div class="step-card">
<div class="step-content">
<div class="step-number">4</div>
<h3 class="step-title">Evaluation</h3>
<p class="step-description">We continuously monitor progress, measure results against KPIs, and make data-driven adjustments to optimize outcomes.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h3 class="cta-title">Ready to transform your business?</h3>
<div class="cta-buttons">
<a href="#" class="btn btn-primary">
Schedule a Consultation
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<a href="#" class="btn btn-secondary">View Case Studies</a>
</div>
</div>
</div>
</section>
<!--
@type: Steps
@industry: Business
@style: Modern
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Section header -->
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">How Our Process Works</h2>
<p class="text-lg text-slate-600">We've refined our business consulting approach into a simple, effective four-step process that delivers consistent results for organizations of all sizes.</p>
</div>
<!-- Process steps -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6 lg:gap-12">
<!-- Step 1 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">1</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Discovery Session</h3>
<p class="text-slate-600 mb-4">We begin with a comprehensive analysis of your business goals, challenges, and current operations to identify key opportunities.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">2</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Strategic Planning</h3>
<p class="text-slate-600 mb-4">Based on our findings, we develop a customized roadmap with actionable strategies tailored to your specific business needs.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">3</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Implementation</h3>
<p class="text-slate-600 mb-4">Our team works alongside yours to execute the strategic plan, providing guidance and support throughout the process.</p>
</div>
<!-- Arrow connector (hidden on mobile) -->
<div class="hidden lg:block absolute top-1/2 -right-6 transform -translate-y-1/2">
<svg class="w-12 h-12 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</div>
<!-- Step 4 -->
<div>
<div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-slate-200 h-full">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mb-6">4</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">Evaluation</h3>
<p class="text-slate-600 mb-4">We continuously monitor progress, measure results against KPIs, and make data-driven adjustments to optimize outcomes.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-slate-900 mb-6">Ready to transform your business?</h3>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="inline-flex items-center justify-center bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium">
Schedule a Consultation
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center bg-white text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg hover:bg-indigo-50 transition-colors font-medium">
View Case Studies
</a>
</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