Component:
Problem-solution Product Light
Colors:
Description:
This carefully crafted Problem/Solution 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: Problem/Solution
@industry: Product
@style: Light
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-red-100: #fee2e2;
--color-red-600: #dc2626;
--color-red-800: #991b1b;
--color-blue-50: #eff6ff;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* 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; /* max-w-7xl */
}
/* 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 */
.problem-solution-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
}
.problem-solution-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: 48rem;
margin: 0 auto;
}
.cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.problem-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);
transition: box-shadow 0.3s ease;
}
.problem-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.icon-wrapper {
width: 3rem;
height: 3rem;
background-color: var(--color-red-100);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-4);
}
.icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-red-600);
}
.card-title {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-red-800);
margin-bottom: var(--spacing-2);
}
.card-description {
color: var(--color-gray-600);
}
.card-solution {
padding-top: var(--spacing-6);
border-top: 1px solid var(--color-gray-200);
margin-top: var(--spacing-6);
}
.solution-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-blue-600);
margin-bottom: var(--spacing-2);
}
.solution-description {
color: var(--color-gray-600);
margin-bottom: var(--spacing-4);
}
.learn-more-link {
display: inline-flex;
align-items: center;
color: var(--color-blue-600);
text-decoration: none;
transition: color 0.3s ease;
}
.learn-more-link:hover {
color: var(--color-blue-700);
}
.learn-more-icon {
width: 1rem;
height: 1rem;
margin-left: var(--spacing-1);
}
.featured-solution {
margin-top: var(--spacing-16);
}
.solution-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.featured-content {
padding: var(--spacing-8);
}
.featured-badge {
display: inline-block;
padding: var(--spacing-2) var(--spacing-4);
background-color: var(--color-blue-50);
color: var(--color-blue-600);
font-size: 0.875rem;
font-weight: 500;
border-radius: 9999px;
margin-bottom: var(--spacing-6);
}
.featured-title {
font-size: 1.5rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.featured-description {
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.feature-list {
list-style: none;
margin-bottom: var(--spacing-8);
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-3);
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
margin: var(--spacing-1) var(--spacing-2) 0 0;
}
.feature-text {
color: var(--color-gray-600);
}
.problem-solution-button-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}
.problem-solution-primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
background-color: var(--color-blue-600);
color: var(--color-white);
text-decoration: none;
border-radius: 0.5rem;
transition: background-color 0.3s ease;
}
.problem-solution-primary-button:hover {
background-color: var(--color-blue-700);
}
.problem-solution-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
background-color: var(--color-white);
color: var(--color-gray-800);
text-decoration: none;
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
transition: background-color 0.3s ease;
}
.problem-solution-secondary-button:hover {
background-color: var(--color-gray-50);
}
.featured-image {
background-color: var(--color-gray-100);
height: 100%;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.problem-solution-section {
padding: var(--spacing-24) 0;
}
.section-title {
font-size: 2.25rem;
}
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.solution-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.featured-content {
padding: var(--spacing-12);
}
.featured-title {
font-size: 1.875rem;
}
}
@media (min-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="problem-solution-section">
<div class="problem-solution-container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">Common challenges with product management</h2>
<p class="section-description">Discover how our platform addresses the most pressing issues faced by product teams today</p>
</div>
<!-- Problem Solution Cards -->
<div class="cards-grid">
<!-- Card 1 -->
<div class="problem-card">
<div>
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="card-title">Time Management</h3>
<p class="card-description">Product teams struggle with balancing feature development, bug fixes, and long-term roadmap planning.</p>
</div>
<div class="card-solution">
<h4 class="solution-title">Our Solution</h4>
<p class="solution-description">Integrated planning tools that help prioritize tasks and allocate resources efficiently across all product initiatives.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-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>
<!-- Card 2 -->
<div class="problem-card">
<div>
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<h3 class="card-title">Stakeholder Alignment</h3>
<p class="card-description">Keeping executives, developers, and customers aligned on product vision and priorities is challenging.</p>
</div>
<div class="card-solution">
<h4 class="solution-title">Our Solution</h4>
<p class="solution-description">Collaborative dashboards and automated reporting tools that keep everyone informed with real-time updates.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-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>
<!-- Card 3 -->
<div class="problem-card">
<div>
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<h3 class="card-title">Data-Driven Decisions</h3>
<p class="card-description">Collecting and interpreting user data to make informed product decisions is time-consuming.</p>
</div>
<div class="card-solution">
<h4 class="solution-title">Our Solution</h4>
<p class="solution-description">Advanced analytics with AI-powered insights that highlight trends and opportunities without manual analysis.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-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>
<!-- Featured Solution -->
<div class="featured-solution">
<div class="solution-card">
<div class="featured-content">
<div class="featured-badge">Featured Solution</div>
<h3 class="featured-title">Unified Product Operations Platform</h3>
<p class="featured-description">Our comprehensive solution brings together planning, execution, and analytics in one place, eliminating the need for multiple disconnected tools.</p>
<ul class="feature-list">
<li class="feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="feature-text">Centralized roadmap planning and execution</span>
</li>
<li class="feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="feature-text">Real-time collaboration across all teams</span>
</li>
<li class="feature-item">
<svg xmlns="http://www.w3.org/2000/svg" class="feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="feature-text">Automated reporting and insights delivery</span>
</li>
</ul>
<div class="problem-solution-button-group">
<a href="#" class="problem-solution-primary-button">Get started</a>
<a href="#" class="problem-solution-secondary-button">Schedule demo</a>
</div>
</div>
<div class="featured-image">
<img src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Product management platform" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Product
@style: Light
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 md:py-24">
<div class="container mx-auto px-4 max-w-7xl">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-4">Common challenges with product management</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Discover how our platform addresses the most pressing issues faced by product teams today</p>
</div>
<!-- Problem Solution Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all hover:shadow-md">
<div class="mb-6">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-normal text-red-800 mb-2">Time Management</h3>
<p class="text-gray-600">Product teams struggle with balancing feature development, bug fixes, and long-term roadmap planning.</p>
</div>
<div class="pt-6 border-t border-gray-200">
<h4 class="text-base font-medium text-blue-600 mb-2">Our Solution</h4>
<p class="text-gray-600 mb-4">Integrated planning tools that help prioritize tasks and allocate resources efficiently across all product initiatives.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
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>
<!-- Card 2 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all hover:shadow-md">
<div class="mb-6">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<h3 class="text-xl font-normal text-red-800 mb-2">Stakeholder Alignment</h3>
<p class="text-gray-600">Keeping executives, developers, and customers aligned on product vision and priorities is challenging.</p>
</div>
<div class="pt-6 border-t border-gray-200">
<h4 class="text-base font-medium text-blue-600 mb-2">Our Solution</h4>
<p class="text-gray-600 mb-4">Collaborative dashboards and automated reporting tools that keep everyone informed with real-time updates.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
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>
<!-- Card 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all hover:shadow-md">
<div class="mb-6">
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<h3 class="text-xl font-normal text-red-800 mb-2">Data-Driven Decisions</h3>
<p class="text-gray-600">Collecting and interpreting user data to make informed product decisions is time-consuming.</p>
</div>
<div class="pt-6 border-t border-gray-200">
<h4 class="text-base font-medium text-blue-600 mb-2">Our Solution</h4>
<p class="text-gray-600 mb-4">Advanced analytics with AI-powered insights that highlight trends and opportunities without manual analysis.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
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>
<!-- Featured Solution -->
<div class="mt-16 md:mt-24">
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
<div class="grid md:grid-cols-2 items-center">
<div class="p-8 md:p-12">
<div class="inline-block px-4 py-2 bg-blue-50 rounded-full text-blue-600 text-sm font-medium mb-6">Featured Solution</div>
<h3 class="text-2xl md:text-3xl font-normal text-gray-800 mb-4">Unified Product Operations Platform</h3>
<p class="text-gray-600 mb-6">Our comprehensive solution brings together planning, execution, and analytics in one place, eliminating the need for multiple disconnected tools.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-gray-600">Centralized roadmap planning and execution</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-gray-600">Real-time collaboration across all teams</span>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-gray-600">Automated reporting and insights delivery</span>
</li>
</ul>
<div class="flex flex-wrap gap-4">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Get started
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 bg-white border border-gray-200 text-gray-800 rounded-lg hover:bg-gray-50 transition-colors">
Schedule demo
</a>
</div>
</div>
<div class="bg-gray-100 h-full">
<!-- Product image by Figcomponents (CC BY 4.0) -->
<img src="https://landinggo.com/assets/img/stock/hero/business-pexels-1620x1080.webp" alt="Product management platform" class="w-full h-full object-cover" loading="lazy">
</div>
</div>
</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