Component:

Steps Marketing Dark

Name: Steps Marketing Dark
Availability: InStock

Free

Tags: Steps Page Section Sale Marketing Dark

Colors:

Description:

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

<style>
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
}

/* 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 */
.steps-section {
  background-color: var(--color-gray-900);
  padding: 4rem 1rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.section-description {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--color-gray-300);
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.step-card {
  background-color: var(--color-gray-800);
  border-radius: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--color-gray-700);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.step-number {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.step-number span {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 700;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.step-description {
  color: var(--color-gray-300);
  line-height: 1.5;
}

.cta-section {
  margin-top: 4rem;
  text-align: center;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-white);
  background-color: var(--color-blue-600);
  border-radius: 0.5rem;
  border: none;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: var(--color-blue-700);
}

.cta-button svg {
  margin-left: 0.5rem;
  margin-right: -0.25rem;
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .steps-section {
    padding: 4rem 1.5rem;
  }
  
  .section-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .steps-section {
    padding: 4rem 2rem;
  }
  
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>

<section class="steps-section" aria-labelledby="steps-heading">
        <!-- Section Header -->
        <div class="section-header">
            <h2 id="steps-heading" class="section-title">
                Transform Your Marketing Strategy
            </h2>
            <p class="section-description">
                Follow our proven 4-step process to revolutionize your digital marketing approach and achieve measurable results.
            </p>
        </div>

        <!-- Steps Grid -->
        <div class="steps-grid">
            <!-- Step 1 -->
            <div class="step-card">
                <div class="step-number">
                    <span aria-hidden="true">1</span>
                </div>
                <h3 class="step-title">Research & Analysis</h3>
                <p class="step-description">Deep dive into your market, competitors, and target audience to develop data-driven insights.</p>
            </div>

            <!-- Step 2 -->
            <div class="step-card">
                <div class="step-number">
                    <span aria-hidden="true">2</span>
                </div>
                <h3 class="step-title">Strategy Development</h3>
                <p class="step-description">Create a comprehensive marketing plan aligned with your business objectives and target metrics.</p>
            </div>

            <!-- Step 3 -->
            <div class="step-card">
                <div class="step-number">
                    <span aria-hidden="true">3</span>
                </div>
                <h3 class="step-title">Implementation</h3>
                <p class="step-description">Execute campaigns across multiple channels with our expert team and advanced tools.</p>
            </div>

            <!-- Step 4 -->
            <div class="step-card">
                <div class="step-number">
                    <span aria-hidden="true">4</span>
                </div>
                <h3 class="step-title">Optimization</h3>
                <p class="step-description">Continuously monitor performance and optimize strategies based on real-time analytics.</p>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="cta-section">
            <a href="#" class="cta-button" aria-label="Start your marketing transformation">
                Start Your Journey
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </a>
        </div>
</section>


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

<section class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8" aria-labelledby="steps-heading">
    <div class="max-w-7xl mx-auto">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 id="steps-heading" class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                Transform Your Marketing Strategy
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-300">
                Follow our proven 4-step process to revolutionize your digital marketing approach and achieve measurable results.
            </p>
        </div>

        <!-- Steps Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Step 1 -->
            <div class="relative">
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">1</span>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Research & Analysis</h3>
                    <p class="text-gray-300">Deep dive into your market, competitors, and target audience to develop data-driven insights.</p>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="relative">
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">2</span>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Strategy Development</h3>
                    <p class="text-gray-300">Create a comprehensive marketing plan aligned with your business objectives and target metrics.</p>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="relative">
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">3</span>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Implementation</h3>
                    <p class="text-gray-300">Execute campaigns across multiple channels with our expert team and advanced tools.</p>
                </div>
            </div>

            <!-- Step 4 -->
            <div class="relative">
                <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">4</span>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-3">Optimization</h3>
                    <p class="text-gray-300">Continuously monitor performance and optimize strategies based on real-time analytics.</p>
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="mt-16 text-center">
            <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-300" aria-label="Start your marketing transformation">
                Start Your Journey
                <svg class="ml-2 -mr-1 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </a>
        </div>
    </div>
</section>

Steps Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions