Component:
Problem-solution SaaS Minimal
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for SaaS landing pages, featuring a Minimal 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: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-red-500: #ef4444;
--color-green-400: #34d399;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
/* 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-20: 5rem;
/* Font Sizes */
--text-base: 1rem;
--text-lg: 1.125rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Max Widths */
--max-w-lg: 32rem;
--max-w-3xl: 48rem;
--max-w-7xl: 80rem;
}
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.problem-solution-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.container {
max-width: var(--max-w-7xl);
margin: 0 auto;
}
.section-header {
text-align: center;
max-width: var(--max-w-3xl);
margin: 0 auto var(--spacing-16);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-gray-600);
}
.problem-solution-grid {
display: grid;
gap: var(--spacing-12);
align-items: center;
}
.problem-column {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.column-title {
font-size: var(--text-2xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-6);
}
.problem-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.problem-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.problem-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-content {
display: flex;
align-items: flex-start;
}
.icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
}
.icon-red {
color: var(--color-red-500);
}
.icon-green {
color: var(--color-green-400);
}
.card-text {
margin-left: var(--spacing-4);
}
.card-title {
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-gray-900);
}
.card-description {
margin-top: var(--spacing-2);
color: var(--color-gray-600);
}
.solution-overlay {
background: linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.9));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.solution-content {
padding: var(--spacing-8);
color: var(--color-white);
max-width: var(--max-w-lg);
}
.solution-content .column-title {
color: var(--color-white);
}
.solution-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.solution-item {
display: flex;
align-items: flex-start;
}
.solution-text {
margin-left: var(--spacing-3);
}
.cta-button {
display: inline-flex;
align-items: center;
margin-top: var(--spacing-8);
padding: var(--spacing-3) var(--spacing-6);
border: none;
border-radius: 0.375rem;
font-size: var(--text-base);
font-weight: 500;
color: var(--color-blue-700);
background-color: var(--color-white);
text-decoration: none;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: #f9fafb;
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-icon {
margin-left: var(--spacing-2);
margin-right: calc(var(--spacing-1) * -1);
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.problem-solution-section {
padding: var(--spacing-20) var(--spacing-6);
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 768px) {
.problem-solution-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
}
</style>
<!-- Problem/Solution Section -->
<section class="problem-solution-section" aria-labelledby="problem-solution-title">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 id="problem-solution-title" class="section-title">
Transform Your Business Operations
</h2>
<p class="section-description">
Discover how our SaaS platform addresses common business challenges and delivers measurable results.
</p>
</div>
<!-- Problem/Solution Grid -->
<div class="problem-solution-grid">
<!-- Problem Column -->
<div class="problem-column">
<h3 class="column-title">Common Challenges</h3>
<!-- Problem Cards -->
<div class="problem-cards">
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" 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-text">
<h4 class="card-title">Manual Data Processing</h4>
<p class="card-description">Teams waste 60% of their time on repetitive data entry and manual reporting tasks.</p>
</div>
</div>
</div>
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="card-text">
<h4 class="card-title">Scattered Information</h4>
<p class="card-description">Critical business data spread across multiple systems leads to inefficient decision-making.</p>
</div>
</div>
</div>
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.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-text">
<h4 class="card-title">Security Concerns</h4>
<p class="card-description">Lack of standardized security protocols puts sensitive business data at risk.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Solution Overlay -->
<div class="solution-overlay">
<div class="solution-content">
<h3 class="column-title">Our Solution</h3>
<ul class="solution-list">
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Automated data processing reduces manual work by 85%</span>
</li>
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Centralized dashboard for all business metrics</span>
</li>
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Enterprise-grade security with SOC 2 compliance</span>
</li>
</ul>
<!-- CTA Button -->
<a
href="#"
class="cta-button"
aria-label="Schedule a demo of our solution"
>
Schedule Demo
<svg class="cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<!-- Problem/Solution Section -->
<section class="bg-white py-12 sm:py-20" 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 max-w-3xl mx-auto mb-16">
<h2 id="problem-solution-title" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Transform Your Business Operations
</h2>
<p class="text-lg text-gray-600">
Discover how our SaaS platform addresses common business challenges and delivers measurable results.
</p>
</div>
<!-- Problem/Solution Grid -->
<div class="grid md:grid-cols-2 gap-12 items-center">
<!-- Problem Column -->
<div class="space-y-8">
<h3 class="text-2xl font-semibold text-gray-900 mb-6">Common Challenges</h3>
<!-- Problem Cards -->
<div class="space-y-6">
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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">
<h4 class="text-lg font-medium text-gray-900">Manual Data Processing</h4>
<p class="mt-2 text-gray-600">Teams waste 60% of their time on repetitive data entry and manual reporting tasks.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Scattered Information</h4>
<p class="mt-2 text-gray-600">Critical business data spread across multiple systems leads to inefficient decision-making.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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="M20.618 5.984A11.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">
<h4 class="text-lg font-medium text-gray-900">Security Concerns</h4>
<p class="mt-2 text-gray-600">Lack of standardized security protocols puts sensitive business data at risk.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Solution Overlay -->
<div class="inset-0 bg-gradient-to-r from-blue-600/90 to-blue-800/90 rounded-lg flex items-center justify-center">
<div class="p-8 text-white max-w-lg">
<h3 class="text-2xl font-semibold mb-6">Our Solution</h3>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Automated data processing reduces manual work by 85%</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Centralized dashboard for all business metrics</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Enterprise-grade security with SOC 2 compliance</span>
</li>
</ul>
<!-- CTA Button -->
<a
href="#"
class="mt-8 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
aria-label="Schedule a demo of our solution"
>
Schedule Demo
<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="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</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