Component:

Steps Software Minimal

Name: Steps Software Minimal
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Steps Page Section Sale Software Minimal

Colors:

Description:

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>

Steps Software Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions