All Prompts
All Prompts
sectionfeaturegridtailwindresponsivegradientlandingiconssaas
Gradient Feature Cards Section for SaaS Landing
Секция с 3 карточками функций для SaaS лендингов. Адаптивный дизайн, градиенты, иконки, списки. Tailwind CSS.
Prompt
<section class="relative sm:pt-24 md:pt-28 max-w-7xl pb-20">
<!-- Ambient gradient -->
<div class="pointer-events-none absolute inset-0 -z-10">
<div class="absolute left-1/2 -translate-x-1/2 -top-16 w-[42rem] h-[42rem] rounded-full bg-gradient-to-b from-indigo-600/15 via-blue-500/10 to-transparent blur-3xl"></div>
</div>
<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
<!-- Cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
<!-- Card 1 -->
<div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8">
<div class="pointer-events-none absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;"></div>
<div class="relative flex w-10 h-10 ring-1 ring-white/20 bg-slate-50/5 rounded-full shadow-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain w-[20px] h-[20px]" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
</div>
<h3 class="relative sm:text-3xl text-2xl font-semibold tracking-tight font-manrope mt-5">Intelligent Automation</h3>
<p class="relative mt-2 text-white/70 text-sm sm:text-base font-sans">Build smart workflows that adapt and scale with your business needs in real-time.</p>
<!-- Illustration -->
<div class="relative mt-6 rounded-2xl p-4 ring-1 ring-white/10 bg-gradient-to-b from-white/[0.03] to-transparent">
<div class="absolute inset-0 rounded-2xl bg-gradient-to-b from-blue-600/10 via-indigo-700/10 to-transparent pointer-events-none"></div>
<!-- Icon row -->
<div class="relative flex items-center justify-between gap-2">
<div class="w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
</div>
<div class="w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
</div>
<div class="w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
</div>
<div class="w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user" class="lucide lucide-user w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
</div>
<div class="w-8 h-8 rounded-full bg-white/10 ring-1 ring-white/10 flex items-center justify-center text-white/90">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-[16px] h-[16px]" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(255, 255, 255);"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
</div>
</div>
<!-- Curves to a core -->
<svg class="relative max-w-[320px] opacity-80 mt-6 mr-auto ml-auto w-[320px] h-[24px]" viewBox="0 0 320 100" fill="none" stroke-width="2" style="width: 320px; height: 24px; color: rgb(255, 255, 255);">
<path d="M20 5 C60 40, 120 40, 160 85" stroke="url(#g1)" stroke-width="1.2" opacity="0.7" class=""></path>
<path d="M85 5 C110 40, 140 40, 160 85" stroke="url(#g1)" stroke-width="1.2" opacity="0.7" class=""></path>
<path d="M150 5 C155 40, 160 40, 160 85" stroke="url(#g1)" stroke-width="1.2" opacity="0.7" class=""></path>
<path d="M235 5 C210 40, 180 40, 160 85" stroke="url(#g1)" stroke-width="1.2" opacity="0.7" class=""></path>
<path d="M300 5 C260 40, 200 40, 160 85" stroke="url(#g1)" stroke-width="1.2" opacity="0.7" class=""></path>
<defs class="">
</defs>
</svg>
<div class="relative mx-auto mt-2 w-10 h-10 rounded-full bg-gradient-to-b from-blue-500 to-indigo-700 ring-1 ring-white/20 shadow-xl flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3" class=""></circle><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="3" class=""></circle></svg>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8">
<div class="pointer-events-none absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;"></div>
<div class="relative flex w-10 h-10 ring-1 ring-white/20 bg-slate-50/5 rounded-full shadow-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="3" class=""></circle><path d="M12 2v2m0 16v2m10-10h-2M4 12H2m15.36-6.36-1.42 1.42M6.06 17.94l-1.42 1.42m12.72 0-1.42-1.42M6.06 6.06 4.64 4.64" class=""></path></svg>
</div>
<h3 class="relative mt-5 text-2xl sm:text-3xl font-semibold tracking-tight font-manrope">Vision Intelligence</h3>
<p class="relative mt-2 text-white/70 text-sm sm:text-base font-sans">Advanced computer vision for image recognition, analysis, and real-time processing.</p>
<!-- Illustration: tag cloud + verified -->
<div class="relative mt-6 rounded-2xl p-4 ring-1 ring-white/10 bg-gradient-to-b from-white/[0.03] to-transparent overflow-hidden">
<div class="absolute inset-0 rounded-2xl bg-gradient-to-b from-indigo-600/10 via-blue-700/10 to-transparent pointer-events-none"></div>
<div class="relative grid grid-cols-3 gap-2 text-[11px] sm:text-xs">
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/80">Detection</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">Recognition</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">Analytics</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/60">Tracking</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">Classification</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/60">Processing</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">Insights</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">ML Models</span>
<span class="px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">Real-time</span>
</div>
<!-- Glow badge -->
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="hidden sm:inline-flex gap-2 hover:from-indigo-500 hover:to-indigo-700 transition-colors shadow-cyan-500/25 text-sm font-medium text-white bg-gradient-to-l from-indigo-600 to-indigo-800 border-slate-50/50 border rounded-full pt-4 pr-4 pb-4 pl-4 shadow-md items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="3" class=""></circle><path d="M12 2v2m0 16v2m10-10h-2M4 12H2m15.36-6.36-1.42 1.42M6.06 17.94l-1.42 1.42m12.72 0-1.42-1.42M6.06 6.06 4.64 4.64" class=""></path></svg>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-6 sm:p-8">
<div class="pointer-events-none absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;"></div>
<div class="relative flex w-10 h-10 ring-1 ring-white/20 bg-slate-50/5 rounded-full shadow-lg items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18" class=""></path><path d="M19 9l-5 5-4-4-3 3" class=""></path></svg>
</div>
<h3 class="relative mt-5 text-2xl sm:text-3xl font-semibold tracking-tight font-manrope">Predictive Analytics</h3>
<p class="relative mt-2 text-white/70 text-sm sm:text-base font-sans">Data-driven insights with machine learning for smarter business decisions.</p>
<!-- Illustration: speech UI -->
<div class="relative mt-6 rounded-2xl p-4 ring-1 ring-white/10 bg-gradient-to-b from-white/[0.03] to-transparent">
<div class="absolute inset-0 rounded-2xl bg-gradient-to-b from-blue-600/10 via-indigo-700/10 to-transparent pointer-events-none"></div>
<div class="relative inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r from-blue-600/30 to-indigo-600/30 border border-white/10 text-xs sm:text-sm text-white shadow-md">
<span class="w-2 h-2 rounded-full bg-white/80 ring-1 ring-white/40"></span>
Analytics Engine
</div>
<!-- Control -->
<div class="relative mt-4 rounded-xl bg-black/40 ring-1 ring-white/10 px-3 py-3 flex items-center gap-3">
<button class="shrink-0 w-9 h-9 rounded-full bg-gradient-to-b from-blue-500 to-indigo-600 ring-1 ring-white/20 flex items-center justify-center text-white shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><path d="M3 3v18h18" class=""></path><path d="M19 9l-5 5-4-4-3 3" class=""></path></svg>
</button>
<!-- Chart visualization -->
<div class="flex-1 flex items-end gap-1">
<div class="w-1 bg-blue-400/60 rounded-full h-3"></div>
<div class="w-1 bg-blue-400/70 rounded-full h-6"></div>
<div class="w-1 bg-blue-400/60 rounded-full h-4"></div>
<div class="w-1 bg-blue-400/80 rounded-full h-8"></div>
<div class="w-1 bg-blue-400/50 rounded-full h-3"></div>
<div class="w-1 bg-blue-400/70 rounded-full h-6"></div>
<div class="w-1 bg-blue-400/60 rounded-full h-4"></div>
<div class="w-1 bg-blue-400/80 rounded-full h-7"></div>
<div class="w-1 bg-blue-400/50 rounded-full h-3"></div>
<div class="w-1 bg-blue-400/70 rounded-full h-5"></div>
<div class="w-1 bg-blue-400/60 rounded-full h-4"></div>
<div class="w-1 bg-blue-400/80 rounded-full h-7"></div>
<div class="w-1 bg-blue-400/50 rounded-full h-3"></div>
<div class="w-1 bg-blue-400/70 rounded-full h-6"></div>
<div class="w-1 bg-blue-400/60 rounded-full h-4"></div>
</div>
<div class="shrink-0 w-2.5 h-6 rounded-full bg-gradient-to-b from-blue-500 to-indigo-600"></div>
</div>
</div>
</div>
</div>
<!-- Feature bullets -->
<div class="mt-10 sm:mt-12 border-t border-white/10 pt-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="flex items-start gap-3">
<span class="inline-flex w-9 h-9 ring-1 ring-white/15 items-center justify-center bg-white/5 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 6v6l4 2" class=""></path></svg>
</span>
<div class="">
<p class="text-sm font-medium text-white/90 font-sans">Real‑Time Processing</p>
<p class="text-sm text-white/60 mt-1 font-sans">Instant insights for faster decisions.</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="inline-flex w-9 h-9 ring-1 ring-white/15 items-center justify-center bg-white/5 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-flex ring-1 ring-white/15 items-center justify-center bg-white/5 rounded-full w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="3" class=""></circle><path d="M12 2v2m0 16v2m10-10h-2M4 12H2m15.36-6.36-1.42 1.42M6.06 17.94l-1.42 1.42m12.72 0-1.42-1.42M6.06 6.06 4.64 4.64" class=""></path></svg>
</span>
<div class="">
<p class="text-sm font-medium text-white/90 font-sans">Smart Automation</p>
<p class="text-sm text-white/60 mt-1 font-sans">Intelligent workflows that adapt.</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="inline-flex w-9 h-9 ring-1 ring-white/15 items-center justify-center bg-white/5 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><path d="m3 7 9-4 9 4-9 4-9-4Z" class=""></path><path d="m3 17 9 4 9-4" class=""></path><path d="m3 12 9 4 9-4" class=""></path></svg>
</span>
<div class="">
<p class="text-sm font-medium text-white/90 font-sans">Scalable Architecture</p>
<p class="text-sm text-white/60 mt-1 font-sans">Built to grow with your business.</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="inline-flex w-9 h-9 ring-1 ring-white/15 items-center justify-center bg-white/5 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-icon-replaced="true" style="width: 18px; height: 18px; color: rgb(255, 255, 255);"><path d="M3 3v18h18" class=""></path><path d="M19 9l-5 5-4-4-3 3" class=""></path></svg>
</span>
<div class="">
<p class="text-sm font-medium text-white/90 font-sans">Advanced Analytics</p>
<p class="text-sm text-white/60 mt-1 font-sans">Deep insights with machine learning.</p>
</div>
</div>
</div>
</div>
</div>
</section>