All Prompts
All Prompts
featuregridtailwindresponsivehoverlandingcta
Tailwind Feature Grid with Hover Cards & CTA
Сетка из 4 карточек с эффектами при наведении, прогресс-барами и CTA. Адаптивный UI-компонент на Tailwind CSS для лендингов, отображающий шаги или фичи.
Prompt
<section class="sm:p-8 ring-1 ring-white/10 bg-white/5 rounded-3xl mr-8 ml-8 pt-6 pr-6 pb-6 pl-6 backdrop-blur">
<div class="flex items-center gap-2 text-sm text-white/70">
<span class="font-normal font-geist">Your Wardrobe</span>
</div>
<div class="mt-2">
<h2
class="text-[44px] sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.9] font-medium text-white tracking-tighter font-geist">
The look comes together.</h2>
<p class="mt-1 text-sm sm:text-base text-white/70 font-normal font-geist">Every great outfit starts with one
inspired piece.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mt-6">
<!-- Discover -->
<!-- Curate -->
<article
class="sm:p-6 flex flex-col min-h-[420px] group transition-all duration-300 ring-white/15 ring-1 bg-white/10 bg-[url(https://cdn.midjourney.com/8349e121-2f5a-4f6b-8038-f3a61ac3fa80/0_0.png?w=800&q=80)] bg-cover rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur grayscale justify-between"
style="">
<div
class="absolute inset-0 transition-all duration-300 group-hover:blur-sm bg-[url(https://cdn.midjourney.com/62f25bc3-52b3-449a-b951-d6fe4fb3f4d2/0_0.png?w=800&q=80)] bg-cover rounded-2xl grayscale"
style="z-index: -1;"></div>
<div class="space-y-5 relative z-10">
<div class="flex gap-3 items-center">
<div class="">
<h3 class="text-lg font-semibold text-white tracking-tight font-geist">01. Discover</h3>
<p class="uppercase text-xs text-white/60 tracking-wider font-geist">Style Profile</p>
</div>
</div>
<p class="text-sm text-white/80 font-geist">Tell us your vibe, fits, and colors you live in. ModaIQ learns your
essentials and statement pieces.</p>
<div class="flex gap-2 items-center">
<div class="flex -space-x-1">
<div class="h-6 w-6 ring-2 ring-white/20 flex bg-white/20 rounded-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="clock" class="lucide lucide-clock lucide-calendar w-[12px] h-[12px]"
data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
<path d="M12 6v6l4 2" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
</div>
</div>
<span class="text-xs text-white/60 font-geist">2-3 minutes</span>
</div>
</div>
<div class="h-1.5 overflow-hidden relative z-10 bg-white/10 rounded-full mt-4">
<div class="h-full bg-white/40 rounded-full" style="width: 50%;"></div>
</div>
</article>
<article
class="sm:p-6 flex flex-col min-h-[420px] ring-1 ring-white/15 group transition-all duration-300 bg-white/10 bg-[url(https://cdn.midjourney.com/8349e121-2f5a-4f6b-8038-f3a61ac3fa80/0_0.png?w=800&q=80)] bg-cover rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur grayscale justify-between"
style="">
<div
class="absolute inset-0 transition-all duration-300 group-hover:blur-sm bg-[url(https://cdn.midjourney.com/8349e121-2f5a-4f6b-8038-f3a61ac3fa80/0_0.png?w=800&q=80)] bg-cover rounded-2xl grayscale"
style="z-index: -1;"></div>
<div class="space-y-5 relative z-10">
<div class="flex items-center gap-3">
<div class="">
<h3 class="text-lg font-semibold text-white font-geist tracking-tight">02. Curate</h3>
<p class="text-xs text-white/60 font-geist uppercase tracking-wider">AI Edit</p>
</div>
</div>
<p class="text-sm text-white/80 font-geist">Watch your personalized edit form—silhouettes, palettes, and
textures that match your life.</p>
<div class="flex items-center gap-2">
<div class="flex -space-x-1">
<div class="h-6 w-6 rounded-full bg-white/20 ring-2 ring-white/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="palette" class="lucide lucide-palette h-3 w-3 text-white/70">
<path
d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
class=""></path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
</svg>
</div>
</div>
<span class="text-xs text-white/60 font-geist">Personalized suggestions</span>
</div>
</div>
<div class="mt-4 h-1.5 bg-white/10 rounded-full overflow-hidden relative z-10">
<div class="h-full bg-white/40 rounded-full" style="width: 50%;"></div>
</div>
</article>
<!-- Try -->
<article
class="sm:p-6 flex flex-col min-h-[420px] ring-1 ring-white/15 group transition-all duration-300 bg-white/10 bg-[url(https://cdn.midjourney.com/8df4d738-0f84-4eb1-aa40-50f8ff6daada/0_0.png?w=800&q=80)] bg-cover rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur grayscale justify-between"
style="">
<div
class="absolute inset-0 transition-all duration-300 group-hover:blur-sm bg-[url(https://cdn.midjourney.com/3c10d4ea-a2b2-4d56-be3c-6ba9c58c4f8a/0_0.png?w=800&q=80)] bg-cover rounded-2xl grayscale"
style="z-index: -1;"></div>
<div class="space-y-5 relative z-10">
<div class="flex items-center gap-3">
<div class="">
<h3 class="text-lg font-semibold text-white font-geist tracking-tight">03. Try</h3>
<p class="text-xs text-white/60 font-geist uppercase tracking-wider">Try‑On & Build</p>
</div>
</div>
<p class="text-sm text-white/80 font-geist">Live size hints and outfit builder help you style looks—on your
terms, in your mirror.</p>
<div class="space-y-2">
<div class="flex items-center gap-2 text-white/60">
<div class="h-2 w-2 rounded-full bg-green-400"></div>
<span class="text-xs font-geist">Live fit hints</span>
</div>
<div class="flex items-center gap-2 text-white/60">
<div class="h-2 w--400"></div>
<span class="text-xs font-geist">Outfit builder</span>
</div>
<div class="flex items-center gap-2 text-white/60">
<div class="h-2 w-2 rounded-full bg-purple-400"></div>
<span class="text-xs font-geist">Seamless checkout</span>
</div>
</div>
</div>
<div class="mt-4 h-1.5 bg-white/10 rounded-full overflow-hidden relative z-10">
<div class="h-full bg-white/40 rounded-full" style="width: 75%;"></div>
</div>
</article>
<!-- Refine -->
<article
class="sm:p-6 flex flex-col min-h-[420px] ring-1 ring-white/15 group transition-all duration-300 bg-white/10 bg-[url(https://cdn.midjourney.com/099d87a2-e479-4416-bcd5-caee73ed997f/0_0.png?w=800&q=80)] bg-cover rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur grayscale justify-between"
style="">
<div
class="absolute inset-0 transition-all duration-300 group-hover:blur-sm bg-[url(https://cdn.midjourney.com/099d87a2-e479-4416-bcd5-caee73ed997f/0_0.png?w=800&q=80)] bg-cover rounded-2xl grayscale"
style="z-index: -1;"></div>
<div class="space-y-5 relative z-10">
<div class="flex items-center gap-3">
<div class="">
<h3 class="text-lg font-semibold text-white font-geist tracking-tight">04. Refine</h3>
<p class="text-xs text-white/60 font-geist uppercase tracking-wider">Style Learning</p>
</div>
</div>
<p class="text-sm text-white/80 font-geist">Save, rate, and note what worked. ModaIQ fine‑tunes future edits for
sharper precision.</p>
<div class="inline-flex gap-2 bg-white/10 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 backdrop-blur items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="star"
class="lucide lucide-star h-3.5 w-3.5 text-white/70">
<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>
<span class="text-xs text-white/70 font-geist">Smart learning</span>
</div>
</div>
<div class="mt-4 h-1.5 bg-white/10 rounded-full overflow-hidden relative z-10">
<div class="h-full bg-white/40 rounded-full" style="width: 100%;"></div>
</div>
</article>
</div>
<div class="mt-8 text-center">
<button class="inline-flex items-center gap-2 rounded-full bg-white text-neutral-900 px-6 py-3 text-sm font-semibold hover:bg-white/90 transition font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
Build your edit
</button>
<p class="mt-2 text-xs text-white/60 font-geist">Create a personalized wardrobe in under 60 seconds</p>
</div>
</section>