Component:
Feature Marketing Dark
Colors:
Description:
This carefully crafted Feature 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: Feature
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--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;
}
/* 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";
}
/* Component Styles */
.marketing-features {
background-color: var(--color-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
max-width: 48rem;
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-label {
color: var(--color-blue-400);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.section-title {
margin-top: var(--spacing-3);
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.section-description {
margin-top: var(--spacing-4);
font-size: 1.125rem;
color: var(--color-gray-300);
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.feature-card {
position: relative;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: 0.75rem;
padding: var(--spacing-8);
transition: border-color 0.2s ease;
}
.feature-card:hover {
border-color: var(--color-blue-500);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: rgba(37, 99, 235, 0.1);
border-radius: 0.5rem;
margin-bottom: var(--spacing-6);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
color: var(--color-blue-400);
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--spacing-3);
}
.feature-description {
color: var(--color-gray-300);
}
.feature-link {
display: inline-flex;
align-items: center;
margin-top: var(--spacing-6);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-blue-400);
text-decoration: none;
transition: color 0.2s ease;
}
.feature-link:hover {
color: var(--color-blue-300);
}
.feature-link svg {
margin-left: var(--spacing-2);
width: 1rem;
height: 1rem;
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-8);
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border: 1px solid transparent;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
margin-left: var(--spacing-2);
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.marketing-features {
padding: var(--spacing-24) var(--spacing-6);
}
.section-title {
font-size: 2.25rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="marketing-features">
<!-- Section Header -->
<div class="section-header">
<span class="section-label">Marketing Features</span>
<h2 class="section-title">Transform Your Marketing Strategy</h2>
<p class="section-description">Leverage our advanced marketing tools to drive growth, engage customers, and maximize ROI with data-driven insights.</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon">
<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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="feature-title">Analytics Dashboard</h3>
<p class="feature-description">Real-time analytics and insights to track campaign performance, audience engagement, and conversion metrics.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="feature-title">Audience Segmentation</h3>
<p class="feature-description">Advanced targeting capabilities to segment your audience based on behavior, demographics, and engagement patterns.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon">
<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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
</div>
<h3 class="feature-title">Campaign Automation</h3>
<p class="feature-description">Streamline your marketing workflows with intelligent automation tools for email, social media, and content distribution.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon">
<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="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
<h3 class="feature-title">A/B Testing</h3>
<p class="feature-description">Test and optimize your marketing campaigns with our advanced A/B testing tools for maximum impact and ROI.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon">
<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="feature-title">Brand Protection</h3>
<p class="feature-description">Safeguard your brand reputation with advanced monitoring tools and real-time alerts for brand mentions.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon">
<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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
</div>
<h3 class="feature-title">ROI Tracking</h3>
<p class="feature-description">Monitor and analyze your marketing spend with comprehensive ROI tracking and budget optimization tools.</p>
<a href="#" class="feature-link">
Learn more
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" role="button" aria-label="Get started with our marketing tools">
Get Started
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
</div>
</section>
<!--
@type: Feature
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-24">
<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-blue-400 text-sm font-semibold tracking-wide uppercase">Marketing Features</span>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl">Transform Your Marketing Strategy</h2>
<p class="mt-4 text-lg text-gray-300">Leverage our advanced marketing tools to drive growth, engage customers, and maximize ROI with data-driven insights.</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Analytics Dashboard</h3>
<p class="text-gray-300">Real-time analytics and insights to track campaign performance, audience engagement, and conversion metrics.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 2 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Audience Segmentation</h3>
<p class="text-gray-300">Advanced targeting capabilities to segment your audience based on behavior, demographics, and engagement patterns.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 3 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Campaign Automation</h3>
<p class="text-gray-300">Streamline your marketing workflows with intelligent automation tools for email, social media, and content distribution.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 4 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">A/B Testing</h3>
<p class="text-gray-300">Test and optimize your marketing campaigns with our advanced A/B testing tools for maximum impact and ROI.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 5 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Brand Protection</h3>
<p class="text-gray-300">Safeguard your brand reputation with advanced monitoring tools and real-time alerts for brand mentions.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
<!-- Feature 6 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">ROI Tracking</h3>
<p class="text-gray-300">Monitor and analyze your marketing spend with comprehensive ROI tracking and budget optimization tools.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 transition-colors" role="button" aria-label="Get started with our marketing tools">
Get Started
<svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</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