Component:
Problem-solution Software Minimal
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for Software 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: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-red-50: #fef2f2;
--color-red-100: #fee2e2;
--color-red-600: #dc2626;
--color-green-100: #dcfce7;
--color-green-600: #16a34a;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.problem-solution {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.problem-solution {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.problem-solution-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4rem;
}
@media (min-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.3s;
}
.card:hover {
box-shadow: var(--shadow-md);
}
.problem {
background-color: var(--color-red-50);
padding: 1.5rem;
}
.problem-header {
display: flex;
align-items: center;
}
.problem-icon-wrapper {
flex-shrink: 0;
background-color: var(--color-red-100);
border-radius: 9999px;
padding: 0.75rem;
line-height: 1;
}
.problem-icon-wrapper.success {
background-color: var(--color-green-100);
}
.problem-icon {
width: 1.5rem;
height: 1.5rem;
}
.problem-icon.red {
color: var(--color-red-600);
}
.problem-icon.success {
color: var(--color-green-600);
}
.card-title {
margin-left: 1rem;
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.card-description {
margin-top: 1rem;
color: var(--color-gray-600);
}
.solution {
border-top: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 1.5rem;
}
.cta {
margin-top: 4rem;
text-align: center;
}
.cta-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.cta-description {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-bottom: 2rem;
max-width: 42rem;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
}
.button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-indigo-600);
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
text-decoration: none;
}
.button-primary:hover {
background-color: var(--color-indigo-700);
}
.button-primary:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
background-color: var(--color-white);
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
text-decoration: none;
}
.button-secondary:hover {
background-color: var(--color-gray-50);
}
.button-secondary:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.trial-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
</style>
<section class="problem-solution" aria-labelledby="problem-solution-title">
<div class="container">
<!-- Section Header -->
<div class="problem-solution-header">
<span class="header-badge">Small Business Solutions</span>
<h2 id="problem-solution-title" class="header-title">
Streamline Your Business Operations
</h2>
<p class="header-description">
See how our software solves the most common challenges small business owners face today.
</p>
</div>
<!-- Problem/Solution Cards -->
<div class="cards-grid">
<!-- Card 1 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<h3 class="card-title">Time-Consuming Administration</h3>
</div>
<p class="card-description">
Small business owners spend up to 20 hours per week on administrative tasks instead of focusing on growth.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" 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>
</div>
<h3 class="card-title">Automated Workflows</h3>
</div>
<p class="card-description">
Our automation tools reduce administrative work by 75%, giving you back 15+ hours every week.
</p>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="card-title">Disconnected Systems</h3>
</div>
<p class="card-description">
Using multiple tools for different business functions creates data silos and increases errors.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" 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>
</div>
<h3 class="card-title">Unified Platform</h3>
</div>
<p class="card-description">
One integrated system for all your business needs, reducing errors by 90% and improving data accuracy.
</p>
</div>
</div>
<!-- Card 3 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="card-title">Unpredictable Costs</h3>
</div>
<p class="card-description">
Enterprise software is often too expensive and complex for small businesses to implement effectively.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" 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>
</div>
<h3 class="card-title">Affordable Pricing</h3>
</div>
<p class="card-description">
Transparent, scalable pricing designed specifically for small businesses with no hidden fees.
</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta">
<h3 class="cta-title">Ready to transform your business?</h3>
<p class="cta-description">
Join thousands of small businesses that have streamlined their operations with our software.
</p>
<div class="cta-buttons">
<a href="#demo" class="button-primary" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
<a href="#trial" class="button-secondary" role="button" aria-label="Start free trial">
Start free trial
</a>
</div>
<p class="trial-note">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white 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 max-w-3xl mx-auto mb-16">
<span class="text-lg font-semibold text-indigo-600">Small Business Solutions</span>
<h2 id="problem-solution-title" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Streamline Your Business Operations
</h2>
<p class="mt-4 text-lg text-gray-600">
See how our software solves the most common challenges small business owners face today.
</p>
</div>
<!-- Problem/Solution Cards -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-16">
<!-- Problem/Solution Card 1 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Time-Consuming Administration</h3>
</div>
<p class="mt-4 text-gray-600">
Small business owners spend up to 20 hours per week on administrative tasks instead of focusing on growth.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" 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>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Automated Workflows</h3>
</div>
<p class="mt-4 text-gray-600">
Our automation tools reduce administrative work by 75%, giving you back 15+ hours every week.
</p>
</div>
</div>
<!-- Problem/Solution Card 2 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-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 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Disconnected Systems</h3>
</div>
<p class="mt-4 text-gray-600">
Using multiple tools for different business functions creates data silos and increases errors.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" 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>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Unified Platform</h3>
</div>
<p class="mt-4 text-gray-600">
One integrated system for all your business needs, reducing errors by 90% and improving data accuracy.
</p>
</div>
</div>
<!-- Problem/Solution Card 3 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Unpredictable Costs</h3>
</div>
<p class="mt-4 text-gray-600">
Enterprise software is often too expensive and complex for small businesses to implement effectively.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" 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>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Affordable Pricing</h3>
</div>
<p class="mt-4 text-gray-600">
Transparent, scalable pricing designed specifically for small businesses with no hidden fees.
</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-gray-900 mb-4">Ready to transform your business?</h3>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
Join thousands of small businesses that have streamlined their operations with our software.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#demo" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
<a href="#trial" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Start free trial">
Start free trial
</a>
</div>
<p class="mt-4 text-sm text-gray-500">No credit card required. 14-day free trial.</p>
</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