Component:
Free Problem-solution SaaS Modern
Tailwind
Tailwind
React
Vue
Svelte
Astro
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for SaaS 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: SaaS
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<style>
.gradient-text {
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<section class="bg-zinc-50 text-zinc-900 relative py-24 px-6 overflow-hidden">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-20 left-10 w-96 h-96 bg-rose-500/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-rose-600/10 rounded-full blur-3xl"
style="animation-delay: 2s;"></div>
</div>
<div class="relative max-w-7xl mx-auto">
<div class="text-center mb-20 animate-fadeInUp">
<div
class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-white/50 backdrop-blur-sm border border-zinc-200 rounded-full">
<span class="text-sm font-semibold gradient-text">The Challenge</span>
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-900 mb-6">
Every Business Has<br>
<span class="gradient-text">The Same Plot Problem</span>
</h2>
<p class="text-xl text-zinc-600 max-w-3xl mx-auto">
Your data tells a powerful story, but it's buried in spreadsheets, scattered across
tools, and impossible to understand. Sound familiar?
</p>
</div>
<!-- Problem Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20 animate-fadeInUp">
<!-- Problem 1 -->
<div
class="bg-white rounded-2xl border-2 border-zinc-200 p-8 relative overflow-hidden group hover:border-zinc-300 transition-all">
<div class="absolute top-0 right-0 w-32 h-32 bg-zinc-100 rounded-full -mr-16 -mt-16"></div>
<div class="relative">
<div class="w-12 h-12 bg-zinc-200 rounded-xl flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-zinc-600" 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>
<h3 class="text-2xl font-bold text-zinc-900 mb-4">Data Overload</h3>
<p class="text-zinc-600 leading-relaxed mb-6">
Drowning in numbers but starving for insights. Spreadsheets everywhere,
clarity nowhere.
</p>
<div class="flex items-center gap-2 text-sm text-zinc-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
<span>73% of business data goes unused</span>
</div>
</div>
</div>
<!-- Problem 2 -->
<div
class="bg-white rounded-2xl border-2 border-zinc-200 p-8 relative overflow-hidden group hover:border-zinc-300 transition-all">
<div class="absolute top-0 right-0 w-32 h-32 bg-zinc-100 rounded-full -mr-16 -mt-16"></div>
<div class="relative">
<div class="w-12 h-12 bg-zinc-200 rounded-xl flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-2xl font-bold text-zinc-900 mb-4">Too Slow to Act</h3>
<p class="text-zinc-600 leading-relaxed mb-6">
By the time you gather insights, the moment has passed. Your competitors
are already ahead.
</p>
<div class="flex items-center gap-2 text-sm text-zinc-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
<span>Average: 5 days from data to decision</span>
</div>
</div>
</div>
<!-- Problem 3 -->
<div
class="bg-white rounded-2xl border-2 border-zinc-200 p-8 relative overflow-hidden group hover:border-zinc-300 transition-all">
<div class="absolute top-0 right-0 w-32 h-32 bg-zinc-100 rounded-full -mr-16 -mt-16"></div>
<div class="relative">
<div class="w-12 h-12 bg-zinc-200 rounded-xl flex items-center justify-center mb-6">
<svg class="w-6 h-6 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-2xl font-bold text-zinc-900 mb-4">Siloed Teams</h3>
<p class="text-zinc-600 leading-relaxed mb-6">
Everyone has their own version of truth. No single source means no unified
direction.
</p>
<div class="flex items-center gap-2 text-sm text-zinc-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
<span>60% of teams work in isolation</span>
</div>
</div>
</div>
</div>
<!-- Transition Element -->
<div class="relative animate-fadeInUp">
<div class="flex items-center justify-center mb-20">
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-zinc-400 to-transparent"></div>
<div class="px-8">
<div class="w-16 h-16 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl flex items-center justify-center shadow-lg shadow-rose-500/30">
<svg class="w-8 h-8 text-white" 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>
<div class="flex-1 h-px bg-gradient-to-r from-transparent via-zinc-400 to-transparent"></div>
</div>
</div>
<!-- Solution Intro -->
<div class="text-center mb-16 animate-fadeInUp">
<div class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-rose-100 text-rose-600 rounded-full">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="text-sm font-semibold">The Solution</span>
</div>
<h2 class="text-4xl md:text-5xl font-bold text-zinc-900 mb-6">
We Rewrote <span class="gradient-text">The Ending</span>
</h2>
<p class="text-xl text-zinc-600 max-w-3xl mx-auto">
Transform every challenge into an opportunity. Here's how we turn your data chaos
into clarity, speed, and unified success.
</p>
</div>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro 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