Component:
Problem-solution Marketing Dark
Colors:
Description:
This carefully crafted Problem/Solution 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: Problem/Solution
@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-400: #60a5fa;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-red-500: #ef4444;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Border Radius */
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Component Styles */
.problem-solution {
background-color: var(--color-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
color: var(--color-white);
font-size: 1.875rem;
font-weight: 700;
margin-bottom: var(--spacing-4);
}
.section-description {
color: var(--color-gray-300);
font-size: 1.125rem;
max-width: 48rem;
margin: 0 auto;
}
.problems-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.problem-card {
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: var(--radius-xl);
padding: var(--spacing-6);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-6);
}
.icon-wrapper {
flex-shrink: 0;
width: 3rem;
height: 3rem;
background-color: rgba(239, 68, 68, 0.1);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-red-500);
}
.card-content {
margin-left: var(--spacing-4);
}
.card-title {
color: var(--color-white);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-description {
color: var(--color-gray-300);
line-height: 1.5;
}
.solution-box {
background-color: rgba(17, 24, 39, 0.5);
border-radius: var(--radius-lg);
padding: var(--spacing-4);
border: 1px solid var(--color-gray-700);
}
.solution-title {
color: var(--color-blue-400);
font-weight: 500;
margin-bottom: 0.5rem;
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-title {
color: var(--color-white);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem var(--spacing-6);
border-radius: var(--radius-lg);
font-weight: 500;
transition: background-color 0.2s;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-blue-700);
}
.btn-secondary {
background-color: var(--color-gray-800);
color: var(--color-white);
border: 1px solid var(--color-gray-700);
}
.btn-secondary:hover {
background-color: var(--color-gray-700);
}
.btn svg {
margin-left: 0.5rem;
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Styles */
@media (min-width: 640px) {
.problem-solution {
padding: 6rem var(--spacing-6);
}
.section-title {
font-size: 2.25rem;
}
.problem-card {
padding: var(--spacing-8);
}
.cta-buttons {
flex-direction: row;
}
}
@media (min-width: 768px) {
.problems-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.problems-grid {
gap: var(--spacing-12);
}
}
</style>
<section class="problem-solution" aria-labelledby="problem-solution-title">
<!-- Section Header -->
<div class="section-header">
<h2 id="problem-solution-title" class="section-title">
Transform Your Marketing Challenges into Opportunities
</h2>
<p class="section-description">
Discover how our data-driven solutions address common marketing pain points and help businesses achieve remarkable growth.
</p>
</div>
<!-- Problems & Solutions Grid -->
<div class="problems-grid">
<!-- Problem Card 1 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Inconsistent Lead Generation</h3>
<p class="card-description">Marketing teams struggle with unpredictable lead flow and poor quality leads, resulting in wasted resources and missed opportunities.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">AI-powered lead scoring and qualification system that ensures consistent, high-quality lead generation through multi-channel optimization.</p>
</div>
</div>
<!-- Problem Card 2 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Poor ROI Tracking</h3>
<p class="card-description">Businesses struggle to accurately measure and attribute marketing ROI across multiple campaigns and channels.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">Advanced analytics dashboard with multi-touch attribution modeling and real-time ROI tracking across all marketing channels.</p>
</div>
</div>
<!-- Problem Card 3 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Content Engagement</h3>
<p class="card-description">Marketing teams struggle to create engaging content that resonates with their target audience and drives conversions.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">AI-driven content optimization platform that analyzes audience behavior and provides actionable insights for content creation.</p>
</div>
</div>
<!-- Problem Card 4 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Market Competition</h3>
<p class="card-description">Companies find it difficult to stand out in crowded markets and effectively differentiate their offerings.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">Competitive intelligence platform that monitors market trends and provides strategic recommendations for differentiation.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h3 class="cta-title">Ready to Transform Your Marketing Strategy?</h3>
<div class="cta-buttons">
<a href="#" class="btn btn-primary" aria-label="Schedule a demo">
Schedule a Demo
<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"/>
</svg>
</a>
<a href="#" class="btn btn-secondary" aria-label="Learn more about our solutions">
Learn More
</a>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-24" aria-labelledby="problem-solution-title">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 id="problem-solution-title" class="text-3xl sm:text-4xl font-bold text-white mb-4">
Transform Your Marketing Challenges into Opportunities
</h2>
<p class="text-gray-300 text-lg max-w-3xl mx-auto">
Discover how our data-driven solutions address common marketing pain points and help businesses achieve remarkable growth.
</p>
</div>
<!-- Problems & Solutions Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<!-- Problem Card 1 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Inconsistent Lead Generation</h3>
<p class="text-gray-300">Marketing teams struggle with unpredictable lead flow and poor quality leads, resulting in wasted resources and missed opportunities.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">AI-powered lead scoring and qualification system that ensures consistent, high-quality lead generation through multi-channel optimization.</p>
</div>
</div>
<!-- Problem Card 2 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Poor ROI Tracking</h3>
<p class="text-gray-300">Businesses struggle to accurately measure and attribute marketing ROI across multiple campaigns and channels.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">Advanced analytics dashboard with multi-touch attribution modeling and real-time ROI tracking across all marketing channels.</p>
</div>
</div>
<!-- Problem Card 3 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Content Engagement</h3>
<p class="text-gray-300">Marketing teams struggle to create engaging content that resonates with their target audience and drives conversions.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">AI-driven content optimization platform that analyzes audience behavior and provides actionable insights for content creation.</p>
</div>
</div>
<!-- Problem Card 4 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Market Competition</h3>
<p class="text-gray-300">Companies find it difficult to stand out in crowded markets and effectively differentiate their offerings.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">Competitive intelligence platform that monitors market trends and provides strategic recommendations for differentiation.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-white mb-6">Ready to Transform Your Marketing Strategy?</h3>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors duration-200" aria-label="Schedule a demo">
Schedule a Demo
<svg class="ml-2 w-5 h-5" 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"/>
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 transition-colors duration-200 border border-gray-700" aria-label="Learn more about our solutions">
Learn More
</a>
</div>
</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