All Prompts
All Prompts
featuregridcardssectiontailwindresponsiveanimatedgradienthoverlanding
Responsive Feature Showcase Grid Section
Секция с отзывчивой сеткой карточек для демонстрации фич. Адаптивный дизайн, анимации при наведении. Tailwind CSS.
Prompt
<section class="sm:px-6 lg:px-8 sm:mt-32 max-w-7xl mt-24 mr-auto ml-auto pr-4 pl-4"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(3)">
<div class="relative overflow-visible">
<div class="pointer-events-none absolute inset-0 -z-10">
<div
class="absolute left-1/2 top-0 h-[32rem] w-[36rem] -translate-x-1/2 rounded-full bg-white/10 blur-[140px] opacity-20">
</div>
<div class="absolute -left-20 bottom-0 h-[20rem] w-[28rem] rounded-full bg-indigo-500/20 blur-[140px] opacity-30">
</div>
<div
class="absolute -right-24 top-1/3 h-[22rem] w-[22rem] rounded-full bg-fuchsia-500/20 blur-[120px] opacity-20">
</div>
</div>
<div class="text-center mb-8 sm:mb-12" data-animate="">
<div
class="mx-auto inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/70 shadow-sm backdrop-blur hover:bg-white/10 hover:border-white/20 transition-all duration-300 cursor-pointer">
<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" class="h-3.5 w-3.5">
<rect width="7" height="7" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="14" rx="1" class=""></rect>
<rect width="7" height="7" x="3" y="14" rx="1" class=""></rect>
</svg>
Complete Design System
</div>
<h2 class="mt-3 sm:mt-4 text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight text-white/90 px-4">
Everything you need to launch
</h2>
<h3 class="mt-1 text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight text-white px-4">world‑class
products</h3>
<p class="mt-2 sm:mt-3 text-xs sm:text-sm lg:text-base text-white/60 max-w-2xl mx-auto px-4">From foundational
elements to complex patterns—discover the building blocks that empower your creative process.</p>
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-3 sm:gap-4 auto-rows-[140px] sm:auto-rows-[180px] sm:gap-x-4 sm:gap-y-4 gap-x-3 gap-y-3"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(3)">
<div
class="group relative col-span-1 sm:col-span-2 lg:col-span-7 row-span-2 lg:row-span-2 rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent ring-1 ring-white/10 backdrop-blur p-4 sm:p-6 overflow-hidden hover:border-white/20 hover:shadow-[0_20px_70px_-20px_rgba(0,0,0,0.8)] transition-all duration-500 cursor-pointer"
data-animate="" data-animate-delay="0">
<div class="z-10 flex flex-col h-full relative">
<div class="flex items-start justify-between mb-3 sm:mb-4">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
SYSTEMS
</div>
<div class="flex items-center gap-1.5 sm:gap-2">
<div class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-emerald-400 animate-pulse"></div>
<span class="text-[10px] sm:text-xs text-white/60">Live</span>
</div>
</div>
<h3 class="text-base sm:text-xl font-semibold tracking-tight text-white mb-1.5 sm:mb-2">Scalable Foundation
</h3>
<p class="text-xs sm:text-sm text-white/70 mb-4 sm:mb-6 max-w-md">Build cohesive design systems with reusable
components, unified tokens, and comprehensive guidelines that keep your entire organization in sync.</p>
<div class="mt-auto">
<div class="grid grid-cols-3 gap-2 sm:gap-3 mb-3 sm:mb-4">
<div
class="rounded-lg bg-white/5 ring-1 ring-white/10 p-2 sm:p-3 backdrop-blur hover:bg-white/10 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200 cursor-pointer">
<div class="text-lg sm:text-2xl font-semibold text-white mb-0.5 sm:mb-1">200+</div>
<div class="text-[9px] sm:text-xs text-white/60">Elements</div>
</div>
<div
class="rounded-lg bg-white/5 ring-1 ring-white/10 p-2 sm:p-3 backdrop-blur hover:bg-white/10 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200 cursor-pointer">
<div class="text-lg sm:text-2xl font-semibold text-white mb-0.5 sm:mb-1">64</div>
<div class="text-[9px] sm:text-xs text-white/60">Variables</div>
</div>
<div
class="rounded-lg bg-white/5 ring-1 ring-white/10 p-2 sm:p-3 backdrop-blur hover:bg-white/10 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200 cursor-pointer">
<div class="text-lg sm:text-2xl font-semibold text-white mb-0.5 sm:mb-1">15</div>
<div class="text-[9px] sm:text-xs text-white/60">Layouts</div>
</div>
</div>
<button class="inline-flex items-center gap-1.5 sm:gap-2 rounded-lg bg-white/10 hover:bg-white/15 px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-white ring-1 ring-white/20 transition-all duration-200 hover:scale-[1.02] hover:ring-white/30">
View System
<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" class="h-3.5 w-3.5 sm:h-4 sm:w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
</div>
<div class="pointer-events-none absolute inset-0">
<div
class="absolute right-0 bottom-0 h-48 sm:h-64 w-48 sm:w-64 rounded-full bg-indigo-500/10 blur-3xl group-hover:bg-indigo-500/20 transition-all duration-500">
</div>
<div
class="absolute left-0 top-0 h-24 sm:h-32 w-24 sm:w-32 rounded-full bg-fuchsia-500/10 blur-2xl group-hover:bg-fuchsia-500/20 transition-all duration-500">
</div>
</div>
</div>
<div
class="group relative col-span-1 sm:col-span-1 lg:col-span-5 row-span-1 lg:row-span-1 rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 backdrop-blur p-4 sm:p-5 overflow-hidden hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer"
data-animate="" data-animate-delay="60">
<div class="flex items-start justify-between h-full">
<div class="flex-1">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
AVATARS
</div>
<h3 class="text-sm sm:text-base font-semibold tracking-tight text-white/90 mb-1.5 sm:mb-2">Identity System
</h3>
<p class="text-[10px] sm:text-xs text-white/70 mb-2 sm:mb-3">Build engaging user profiles with flexible
avatar components and presence indicators.</p>
<div class="flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-3">
<div class="flex -space-x-1.5 sm:-space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8e170226-595e-423d-bef3-9845ff2a7a36_3840w.jpg" alt="" class="w-6 h-6 sm:w-8 sm:h-8 object-cover ring-black/50 ring-2 rounded-full hover:scale-110 hover:z-10 transition-transform duration-200">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d3da1789-0f7a-4fbc-b7b6-606f9b85b083_3840w.jpg" alt="" class="w-6 h-6 sm:w-8 sm:h-8 object-cover ring-black/50 ring-2 rounded-full hover:scale-110 hover:z-10 transition-transform duration-200">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68d0e141-c428-45cd-819a-d7123081d736_3840w.jpg" alt="" class="ring-2 ring-black/50 w-6 h-6 sm:w-8 sm:h-8 object-cover rounded-full hover:scale-110 hover:z-10 transition-transform duration-200">
<div
class="h-6 w-6 sm:h-8 sm:w-8 rounded-full bg-white/10 ring-2 ring-black/50 flex items-center justify-center text-[10px] sm:text-xs text-white/70 hover:bg-white/20 hover:scale-110 transition-all duration-200 cursor-pointer">
+8</div>
</div>
<span class="text-[10px] sm:text-xs text-white/60">Active users</span>
</div>
</div>
<div class="relative ml-2 sm:ml-3 shrink-0">
<div
class="ring-1 ring-white/10 overflow-visible flex bg-gradient-to-br from-white/10 to-transparent w-16 h-16 sm:w-20 sm:h-20 rounded-full relative items-center justify-center hover:ring-white/20 hover:scale-110 transition-all duration-300 cursor-pointer">
<img alt="avatar" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/986db8ed-1c5d-42fb-8c1d-4b3716d2e317_320w.jpg" class="w-14 h-14 sm:w-16 sm:h-16 object-cover rounded-full">
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
<span class="absolute h-16 w-16 sm:h-20 sm:w-20 rounded-full ring-1 ring-white/20"></span>
<span class="absolute h-14 w-14 sm:h-16 sm:w-16 rounded-full ring-1 ring-white/10"></span>
</div>
<div
class="absolute right-1 bottom-1 sm:right-1.5 sm:bottom-1.5 h-2.5 w-2.5 sm:h-3 sm:w-3 rounded-full bg-emerald-400 ring-2 ring-black/50">
</div>
</div>
</div>
</div>
</div>
<div
class="relative col-span-1 sm:col-span-1 lg:col-span-5 row-span-1 lg:row-span-1 rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 backdrop-blur p-4 sm:p-5 overflow-hidden hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer"
data-animate="" data-animate-delay="120">
<div class="flex items-start justify-between mb-2 sm:mb-3">
<div class="">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
CONTROLS
</div>
<h3 class="text-sm sm:text-base font-semibold tracking-tight text-white/90">Interactive Elements</h3>
</div>
<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"
class="text-white/40 h-4 w-4 sm:h-5 sm:w-5">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</div>
<div class="space-y-2 sm:space-y-3">
<div
class="flex items-center justify-between rounded-lg bg-black/20 p-2 sm:p-2.5 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<span class="text-[10px] sm:text-xs text-white/80">Theme</span>
<div
class="relative h-4 w-8 sm:h-5 sm:w-10 rounded-full bg-indigo-500/80 ring-1 ring-indigo-400/30 hover:bg-indigo-500 transition-colors duration-200">
<span class="absolute right-0.5 top-0.5 h-3 w-3 sm:h-4 sm:w-4 rounded-full bg-white shadow-sm"></span>
</div>
</div>
<div
class="flex items-center justify-between rounded-lg bg-black/20 p-2 sm:p-2.5 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<span class="text-[10px] sm:text-xs text-white/80">Alerts</span>
<div
class="relative h-4 w-8 sm:h-5 sm:w-10 rounded-full bg-white/10 ring-1 ring-white/10 hover:bg-white/15 transition-colors duration-200">
<span class="absolute left-0.5 top-0.5 h-3 w-3 sm:h-4 sm:w-4 rounded-full bg-white/40"></span>
</div>
</div>
<div
class="rounded-lg bg-black/20 p-2 sm:p-2.5 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="flex items-center justify-between mb-1.5 sm:mb-2">
<span class="text-[10px] sm:text-xs text-white/80">Intensity</span>
<span class="text-[10px] sm:text-xs text-white/60">72%</span>
</div>
<div class="h-1 w-full rounded-full bg-white/10">
<div class="h-1 w-[72%] rounded-full bg-gradient-to-r from-indigo-400 to-fuchsia-400"></div>
</div>
</div>
</div>
</div>
<div
class="col-span-1 sm:col-span-1 lg:col-span-4 row-span-2 lg:row-span-2 overflow-hidden ring-white/10 ring-1 bg-gradient-to-br from-white/10 to-white/5 max-h-fit border-white/10 border rounded-xl sm:rounded-2xl pt-4 pr-4 pb-4 pl-4 sm:pt-5 sm:pr-5 sm:pb-5 sm:pl-5 relative backdrop-blur hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer"
data-animate="" data-animate-delay="180">
<div class="flex flex-col h-full max-h-fit">
<div class="flex items-start justify-between mb-3 sm:mb-4">
<div class="">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
VISUALS
</div>
<h3 class="text-sm sm:text-base font-semibold tracking-tight text-white/90">Rich Media</h3>
<p class="text-[10px] sm:text-xs text-white/60 mt-0.5 sm:mt-1">Premium galleries with adaptive layouts</p>
</div>
</div>
<div class="grid grid-cols-3 gap-1.5 sm:gap-2">
<div
class="aspect-square rounded-lg overflow-hidden ring-1 ring-white/10 hover:ring-white/20 hover:scale-[1.05] transition-all duration-300 cursor-pointer">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9c3bc09e-65cf-444d-9370-2dcf55ea82a1_320w.webp" alt="thumb" class="w-full h-full object-cover hover:scale-110 transition-transform duration-300">
</div>
<div
class="aspect-square rounded-lg overflow-hidden ring-1 ring-white/10 hover:ring-white/20 hover:scale-[1.05] transition-all duration-300 cursor-pointer">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cd20236d-6b12-4726-aca0-12ec99d279bf_320w.webp" alt="thumb" class="w-full h-full object-cover hover:scale-110 transition-transform duration-300">
</div>
<div
class="aspect-square ring-1 ring-white/10 flex bg-white/5 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/64d3b592-b44b-4c27-9599-de93daf1617a_320w.jpg)] bg-cover rounded-lg blur-none items-center justify-center hover:ring-white/20 hover:scale-[1.05] hover:bg-white/10 transition-all duration-300 cursor-pointer">
<span class="text-[10px] sm:text-xs text-white/70">+32</span>
</div>
</div>
</div>
</div>
<div
class="relative col-span-1 sm:col-span-1 lg:col-span-4 row-span-1 lg:row-span-1 rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 backdrop-blur p-4 sm:p-5 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer"
data-animate="" data-animate-delay="240">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
DEVELOPER
</div>
<h3 class="text-sm sm:text-base font-semibold tracking-tight text-white/90 mb-1.5 sm:mb-2">Framework Ready</h3>
<p class="text-[10px] sm:text-xs text-white/70 mb-3 sm:mb-4">Production code with type safety and complete API
documentation</p>
<div
class="ring-white/10 ring-1 bg-black/80 border-white/10 border rounded-lg pt-2.5 pr-2.5 pb-2.5 pl-2.5 sm:pt-3 sm:pr-3 sm:pb-3 sm:pl-3 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)] backdrop-blur-xl hover:bg-black/30 hover:ring-white/20 transition-all duration-200">
<div class="flex items-center gap-1.5 sm:gap-2 mb-1.5 sm:mb-2">
<div class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-red-400"></div>
<div class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-yellow-400"></div>
<div class="h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-emerald-400"></div>
<span class="text-[9px] sm:text-[10px] text-white/50 ml-auto">card.tsx</span>
</div>
<pre class="text-[9px] sm:text-[10px] text-white/70 leading-relaxed overflow-x-auto"><code class=""><span class="text-purple-400">import</span> <span class="text-white/90">{ Card }</span> <span class="text-purple-400">from</span> <span class="text-emerald-400">'@nexus/ui'</span>
<span class="text-blue-400">export</span> <span class="text-purple-400">function</span> <span class="text-yellow-400">Profile</span>() {
<span class="text-purple-400">return</span> <span class="text-white/70"><</span><span class="text-blue-400">Card</span><span class="text-white/70">></span>Welcome<span class="text-white/70"></</span><span class="text-blue-400">Card</span><span class="text-white/70">></span>
}</code></pre>
</div>
</div>
<div
class="relative col-span-1 sm:col-span-1 lg:col-span-4 row-span-1 lg:row-span-1 rounded-xl sm:rounded-2xl border border-white/10 bg-gradient-to-b from-white/10 to-white/5 ring-1 ring-white/10 backdrop-blur p-4 sm:p-5 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer"
data-animate="" data-animate-delay="300">
<div class="flex items-start justify-between mb-3 sm:mb-4">
<div class="">
<div
class="inline-flex text-[9px] sm:text-[10px] font-medium text-white-300 bg-white-500/20 ring-white/20 ring-1 rounded-md mb-2 pt-1 pr-2 pb-1 pl-2 items-center">
SPEED
</div>
<h3 class="text-sm sm:text-base font-semibold tracking-tight text-white/90">Blazing Fast</h3>
</div>
<div class="flex items-center gap-1">
<div
class="h-5 w-5 sm:h-6 sm:w-6 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/30 flex items-center justify-center hover:bg-emerald-500/30 hover:scale-110 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-emerald-400 h-3 w-3 sm:h-3.5 sm:w-3.5">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-2 sm:gap-3">
<div
class="rounded-lg bg-black/20 p-2.5 sm:p-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
<div class="text-base sm:text-lg font-semibold text-emerald-400 mb-0.5">12KB</div>
<div class="text-[9px] sm:text-[10px] text-white/60">Core Size</div>
</div>
<div
class="rounded-lg bg-black/20 p-2.5 sm:p-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 hover:scale-[1.02] transition-all duration-200">
<div class="text-base sm:text-lg font-semibold text-sky-400 mb-0.5">100/100</div>
<div class="text-[9px] sm:text-[10px] text-white/60">Performance</div>
</div>
</div>
</div>
</div>
</div>
</section>