Component:
Problem-solution Business Modern
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for Business landing pages, featuring a Modern 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: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--primary-color: #4f46e5; /* indigo-600 */
--primary-color-dark: #4338ca; /* indigo-700 */
--primary-color-light: #e0e7ff; /* indigo-100 */
--secondary-color: #ef4444; /* red-500 */
--secondary-color-bg: #fef2f2; /* red-50 */
--secondary-color-border: #fee2e2;/* red-100 */
--secondary-color-dark: #b91c1c; /* red-700 */
--text-main: #0f172a; /* slate-900 */
--text-secondary: #334155; /* slate-700 */
--text-muted: #64748b; /* slate-600 */
--bg-main: #f8fafc; /* slate-50 */
--border-radius-xl: 0.75rem;
--shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.08);
--shadow: 0 1px 2px 0 rgba(15,23,42,0.05);
--font-main: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--transition: 0.2s cubic-bezier(0.4,0,0.2,1);
--ring: 0 0 0 2px var(--primary-color-light);
--max-width-7xl: 80rem;
--max-width-5xl: 64rem;
--max-width-3xl: 48rem;
--gap-lg: 2.5rem;
--gap: 2.5rem;
--space-y-2: 0.5rem;
--p-8: 2rem;
--p-4: 1rem;
--px-4: 1rem;
--px-6: 1.5rem;
--px-8: 2rem;
--py-3: 0.75rem;
--py-12: 3rem;
--mb-4: 1rem;
--mb-6: 1.5rem;
--mb-12: 3rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-main);
}
.problem-solution-section {
background: var(--bg-main);
color: var(--text-main);
padding: var(--py-12) var(--px-4);
}
.problem-solution-container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding-left: var(--px-4);
padding-right: var(--px-4);
}
@media (min-width: 640px) {
.problem-solution-container {
padding-left: 1.5rem; /* sm:px-6 */
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.problem-solution-container {
padding-left: 2rem; /* lg:px-8 */
padding-right: 2rem;
}
}
.problem-solution-header {
text-align: center;
margin-bottom: var(--mb-12);
}
.problem-solution-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
color: var(--text-main);
margin-bottom: var(--mb-4);
line-height: 1.2;
}
@media (min-width: 640px) {
.problem-solution-title {
font-size: 2.25rem; /* sm:text-4xl */
}
}
.problem-solution-desc {
color: var(--text-muted);
font-size: 1.125rem; /* text-lg */
max-width: var(--max-width-3xl);
margin-left: auto;
margin-right: auto;
}
.problem-solution-cards {
max-width: var(--max-width-5xl);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--gap);
position: relative;
align-items: stretch;
}
@media (min-width: 1024px) {
.problem-solution-cards {
flex-direction: row;
gap: 0;
}
}
.problem-card,
.solution-card {
flex: 1 1 0%;
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
@media (min-width: 1024px) {
.problem-card {
padding-right: 2rem; /* lg:pr-8 */
}
.solution-card {
padding-left: 2rem; /* lg:pl-8 */
margin-top: 0;
}
}
.solution-card {
margin-top: 2.5rem; /* mt-10 */
}
@media (min-width: 1024px) {
.solution-card {
margin-top: 0;
}
}
/* Problem Card Styles */
.problem-card-inner {
background: var(--secondary-color-bg);
border-radius: var(--border-radius-xl);
padding: var(--p-8);
box-shadow: var(--shadow-lg);
border: 1px solid var(--secondary-color-border);
height: 100%;
display: flex;
flex-direction: column;
outline: none;
transition: box-shadow var(--transition), border-color var(--transition);
}
.problem-card-inner:focus {
box-shadow: 0 0 0 2px var(--secondary-color);
border-color: var(--secondary-color);
}
.problem-card-header {
display: flex;
align-items: center;
margin-bottom: var(--mb-4);
}
.problem-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.75rem;
}
.problem-card-title {
font-size: 1.5rem; /* text-2xl */
font-weight: 700;
color: var(--secondary-color-dark);
}
.problem-card-text {
color: var(--secondary-color-dark);
font-size: 1rem;
margin-bottom: var(--mb-6);
}
.problem-card-list {
list-style: disc;
padding-left: 1.5rem;
color: var(--secondary-color-dark);
font-size: 0.875rem;
display: flex;
flex-direction: column;
gap: var(--space-y-2);
}
/* Solution Card Styles */
.solution-card-inner {
background: #fff;
border-radius: var(--border-radius-xl);
padding: var(--p-8);
box-shadow: var(--shadow-lg);
border: 2px solid var(--primary-color-light);
display: flex;
flex-direction: column;
height: 100%;
outline: none;
transition: box-shadow var(--transition), border-color var(--transition);
}
.solution-card-header {
display: flex;
align-items: center;
margin-bottom: var(--mb-4);
}
.solution-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.75rem;
}
.solution-card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color-dark);
}
.solution-card-text {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: var(--mb-6);
}
.solution-card-list {
list-style: disc;
padding-left: 1.5rem;
color: var(--text-muted);
font-size: 0.875rem;
display: flex;
flex-direction: column;
gap: var(--space-y-2);
margin-bottom: var(--mb-6);
}
.solution-card-btn {
margin-top: auto;
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: var(--py-3) var(--px-6);
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
box-shadow: var(--shadow);
text-decoration: none;
transition: background var(--transition), box-shadow var(--transition);
outline: none;
border: none;
cursor: pointer;
position: relative;
}
.solution-card-btn:hover,
.solution-card-btn:focus {
background: var(--primary-color-dark);
}
.solution-card-btn:focus {
box-shadow: 0 0 0 2px var(--primary-color-light), 0 1px 2px 0 rgba(15,23,42,0.05);
}
/* Accessibility: focus ring for keyboard navigation */
.problem-card-inner:focus-visible,
.solution-card-inner:focus-visible,
.solution-card-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--primary-color-light), 0 1px 2px 0 rgba(15,23,42,0.05);
}
/* Responsive font scaling for button */
@media (min-width: 640px) {
.solution-card-btn {
font-size: 1.125rem;
}
}
</style>
<section class="problem-solution-section">
<div class="problem-solution-container">
<div class="problem-solution-header">
<h2 class="problem-solution-title">Transform Your Business Challenges into Opportunities</h2>
<p class="problem-solution-desc">Discover how our data-driven solutions address common business pain points and help businesses achieve remarkable growth.</p>
</div>
</div>
<div class="problem-solution-cards">
<!-- Problem Card -->
<div class="problem-card">
<div class="problem-card-inner" aria-label="Business Problem" tabindex="0">
<div class="problem-card-header">
<span class="problem-card-icon" aria-hidden="true">
<!-- Exclamation icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--secondary-color)" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="9" x2="12" y2="11" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="15" x2="12.01" y2="15" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<h3 class="problem-card-title">The Challenge Modern Businesses Face</h3>
</div>
<p class="problem-card-text">In today’s fast-paced market, businesses struggle to keep up with digital transformation, customer expectations, and operational efficiency. Manual processes, fragmented tools, and lack of real-time insights often lead to missed opportunities and slow growth.</p>
<ul class="problem-card-list" aria-label="Key Problems">
<li>Disconnected workflows and siloed data</li>
<li>Time-consuming manual reporting</li>
<li>Difficulty scaling operations efficiently</li>
</ul>
</div>
</div>
<!-- Solution Card -->
<div class="solution-card">
<div class="solution-card-inner" aria-label="Business Solution" tabindex="0">
<div class="solution-card-header">
<span class="solution-card-icon" aria-hidden="true">
<!-- Lightbulb icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary-color)" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3a7 7 0 0 1 7 7c0 2.386-1.34 4.434-3.25 5.5A2.5 2.5 0 0 1 13 18.5V19a1 1 0 0 1-2 0v-.5a2.5 2.5 0 0 1-2.75-3.5C6.34 14.434 5 12.386 5 10a7 7 0 0 1 7-7Z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 21h6"/>
</svg>
</span>
<h3 class="solution-card-title">Our Solution: Streamlined Business Management</h3>
</div>
<p class="solution-card-text">Empower your team with an all-in-one platform designed for modern business needs. Automate workflows, centralize data, and gain actionable insights—so you can focus on growth, not admin.</p>
<ul class="solution-card-list" aria-label="Solution Benefits">
<li>Unified dashboard for all business operations</li>
<li>Automated analytics and reporting</li>
<li>Seamless integrations with your favorite tools</li>
</ul>
<a href="#get-started" class="solution-card-btn" role="button" aria-label="Get Started">Get Started</a>
</div>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 font-inter text-slate-900 py-12 px-4 sm:px-8 lg:px-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Transform Your Business Challenges into Opportunities</h2>
<p class="text-slate-600 text-lg max-w-3xl mx-auto">Discover how our data-driven solutions address common business pain points and help businesses achieve remarkable growth.</p>
</div>
</div>
<div class="max-w-5xl mx-auto flex flex-col lg:flex-row items-stretch gap-10 lg:gap-0 relative">
<!-- Problem Card -->
<div class="flex-1 w-full lg:pr-8">
<div class="bg-red-50 rounded-xl p-8 shadow-lg border border-red-100 h-full flex flex-col" aria-label="Business Problem" tabindex="0">
<div class="flex items-center mb-4">
<!-- Exclamation icon -->
<span class="inline-flex items-center justify-center w-10 h-10 mr-3" aria-hidden="true">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12A9 9 0 1 1 3 12a9 9 0 0 1 18 0Z"/></svg>
</span>
<h3 class="text-2xl font-bold text-red-700">The Challenge Modern Businesses Face</h3>
</div>
<p class="text-base mb-6 text-red-700">In today’s fast-paced market, businesses struggle to keep up with digital transformation, customer expectations, and operational efficiency. Manual processes, fragmented tools, and lack of real-time insights often lead to missed opportunities and slow growth.</p>
<ul class="list-disc pl-6 text-sm space-y-2 text-red-700" aria-label="Key Problems">
<li>Disconnected workflows and siloed data</li>
<li>Time-consuming manual reporting</li>
<li>Difficulty scaling operations efficiently</li>
</ul>
</div>
</div>
<!-- Solution Card -->
<div class="flex-1 w-full lg:pl-8 mt-10 lg:mt-0">
<div class="bg-white rounded-xl p-8 shadow-lg border-2 border-indigo-100 flex flex-col h-full" aria-label="Business Solution" tabindex="0">
<div class="flex items-center mb-4">
<!-- Lightbulb icon -->
<span class="inline-flex items-center justify-center w-10 h-10 mr-3" aria-hidden="true">
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3a7 7 0 0 1 7 7c0 2.386-1.34 4.434-3.25 5.5A2.5 2.5 0 0 1 13 18.5V19a1 1 0 0 1-2 0v-.5a2.5 2.5 0 0 1-2.75-3.5C6.34 14.434 5 12.386 5 10a7 7 0 0 1 7-7Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 21h6"/></svg>
</span>
<h3 class="text-2xl font-bold text-indigo-700">Our Solution: Streamlined Business Management</h3>
</div>
<p class="text-slate-700 text-base mb-6">Empower your team with an all-in-one platform designed for modern business needs. Automate workflows, centralize data, and gain actionable insights—so you can focus on growth, not admin.</p>
<ul class="list-disc pl-6 text-slate-600 text-sm space-y-2 mb-6" aria-label="Solution Benefits">
<li>Unified dashboard for all business operations</li>
<li>Automated analytics and reporting</li>
<li>Seamless integrations with your favorite tools</li>
</ul>
<a href="#get-started" class="mt-auto inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold text-base shadow hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="button" aria-label="Get Started">Get Started</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