Steps Marketing Dark

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>
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