Component:

Steps Product Light

Name: Steps Product Light
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Steps Page Section Sale Product Light

Colors:

Description:

This carefully crafted Steps component is perfect for Product landing pages, featuring a Light 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: Product
@style: Light
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-50: #eff6ff;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-600: #2563eb;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;

  /* Container */
  --container-max-width: 80rem;
  --content-max-width: 48rem;
  --steps-max-width: 64rem;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.steps-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-16) 0;
}

.steps-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.steps-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  text-align: center;
  margin-bottom: var(--spacing-16);
}

.steps-label {
  color: var(--color-blue-600);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.steps-title {
  color: var(--color-gray-800);
  font-size: 1.875rem;
  font-weight: 500;
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.steps-description {
  color: var(--color-gray-600);
  font-size: 1.125rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  max-width: var(--steps-max-width);
  margin: 0 auto;
}

.step-wrapper {
  position: relative;
}

.step-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: var(--spacing-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.step-icon-wrapper {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  border-radius: 9999px;
  margin-bottom: var(--spacing-6);
}

.step-icon {
  width: 2rem;
  height: 2rem;
}

.step-label {
  color: var(--color-blue-600);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-2);
}

.step-title {
  color: var(--color-gray-800);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--spacing-3);
}

.step-description {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.step-link {
  color: var(--color-blue-600);
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-top: auto;
}

.step-link-icon {
  width: 1rem;
  height: 1rem;
  margin-left: var(--spacing-1);
}

.step-arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 0;
}

.step-arrow svg {
  width: 4rem;
  height: 2rem;
  color: var(--color-blue-400);
}

.steps-cta-section {
  margin-top: var(--spacing-16);
  text-align: center;
}

.steps-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-blue-300);
  color: var(--color-gray-800);
  padding: var(--spacing-3) var(--spacing-6);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.steps-cta-button:hover {
  background-color: var(--color-gray-50);
}

.steps-cta-button-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--spacing-2);
}

.steps-cta-note {
  color: var(--color-gray-500);
  font-size: 0.875rem;
  margin-top: var(--spacing-4);
}

/* Responsive Breakpoints */
@media (min-width: 768px) {
  .steps-section {
    padding: var(--spacing-24) 0;
  }

  .steps-container {
    padding: 0 var(--spacing-8);
  }

  .steps-title {
    font-size: 2.25rem;
  }

  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-12);
  }

  .step-arrow {
    display: block;
  }
}
</style>

<section class="steps-section">
  <div class="steps-container">
    <!-- Section Header -->
    <div class="steps-header">
      <span class="steps-label">How It Works</span>
      <h2 class="steps-title">Transform your workflow in three simple steps</h2>
      <p class="steps-description">Our streamlined process makes implementation quick and easy, so you can focus on what matters most.</p>
    </div>
    
    <!-- Steps Container -->
    <div class="steps-grid">
      <!-- Step 1 -->
      <div class="step-wrapper">
        <div class="step-card">
          <div class="step-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <span class="step-label">Step 1</span>
          <h3 class="step-title">Analyze Your Needs</h3>
          <p class="step-description">Our team works with you to understand your unique requirements and goals for product implementation.</p>
          <a href="#" class="step-link">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
        <!-- Arrow for desktop -->
        <div class="step-arrow">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </div>
      </div>
      
      <!-- Step 2 -->
      <div class="step-wrapper">
        <div class="step-card">
          <div class="step-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
          </div>
          <span class="step-label">Step 2</span>
          <h3 class="step-title">Customize & Configure</h3>
          <p class="step-description">We tailor our solution to fit your specific workflow, integrating seamlessly with your existing systems.</p>
          <a href="#" class="step-link">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
        <!-- Arrow for desktop -->
        <div class="step-arrow">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </div>
      </div>
      
      <!-- Step 3 -->
      <div class="step-wrapper">
        <div class="step-card">
          <div class="step-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="step-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <span class="step-label">Step 3</span>
          <h3 class="step-title">Deploy & Support</h3>
          <p class="step-description">We ensure smooth implementation with ongoing support and regular updates to optimize performance.</p>
          <a href="#" class="step-link">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="step-link-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </div>
    
    <!-- CTA Section -->
    <div class="steps-cta-section">
      <a href="#" class="steps-cta-button">
        <span>Get started today</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="steps-cta-button-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </a>
      <p class="steps-cta-note">No credit card required • 14-day free trial</p>
    </div>
  </div>
</section>


                <!--
@type: Steps
@industry: Product
@style: Light
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-16 md:py-24">
  <div class="container mx-auto px-4 md:px-8">
    <!-- Section Header -->
    <div class="max-w-3xl mx-auto text-center mb-16">
      <span class="text-blue-600 font-medium text-sm uppercase tracking-wider">How It Works</span>
      <h2 class="text-gray-800 text-3xl md:text-4xl font-medium mt-2 mb-4">Transform your workflow in three simple steps</h2>
      <p class="text-gray-600 text-lg">Our streamlined process makes implementation quick and easy, so you can focus on what matters most.</p>
    </div>
    
    <!-- Steps Container -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 max-w-5xl mx-auto">
      <!-- Step 1 -->
      <div class="relative">
        <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center relative z-10">
          <div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 1</span>
          <h3 class="text-gray-800 text-xl font-medium mb-3">Analyze Your Needs</h3>
          <p class="text-gray-600 mb-6">Our team works with you to understand your unique requirements and goals for product implementation.</p>
          <a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
        <!-- Arrow for desktop -->
        <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 z-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-16 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </div>
      </div>
      
      <!-- Step 2 -->
      <div class="relative">
        <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center relative z-10">
          <div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
          </div>
          <span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 2</span>
          <h3 class="text-gray-800 text-xl font-medium mb-3">Customize & Configure</h3>
          <p class="text-gray-600 mb-6">We tailor our solution to fit your specific workflow, integrating seamlessly with your existing systems.</p>
          <a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
        <!-- Arrow for desktop -->
        <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 z-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-16 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </div>
      </div>
      
      <!-- Step 3 -->
      <div class="relative">
        <div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm h-full flex flex-col items-center text-center">
          <div class="w-16 h-16 flex items-center justify-center bg-blue-50 text-blue-600 rounded-full mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <span class="text-blue-600 font-medium text-sm uppercase tracking-wider mb-2">Step 3</span>
          <h3 class="text-gray-800 text-xl font-medium mb-3">Deploy & Support</h3>
          <p class="text-gray-600 mb-6">We ensure smooth implementation with ongoing support and regular updates to optimize performance.</p>
          <a href="#" class="text-blue-600 font-medium flex items-center mt-auto">
            Learn more
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </div>
    
    <!-- CTA Section -->
    <div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center justify-center bg-white border border-blue-300 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition duration-150 ease-in-out">
        <span>Get started today</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </a>
      <p class="text-gray-500 mt-4 text-sm">No credit card required • 14-day free trial</p>
    </div>
  </div>
</section>

Steps Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions