All Prompts
All Prompts
mobileecommercetailwinddiscoverscrollabletabbarnavigationui
Mobile E-commerce Discover Screen (Tailwind)
Мобильная витрина для e-commerce на Tailwind. Показывает товары, категории, скроллится. Идеально для прототипов.
Prompt
<article class="relative bg-black rounded-[60px] px-2 py-2" style="width: 393px; height: 854px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4);">
<div class="relative h-full w-full rounded-[52px] overflow-hidden bg-white">
<!-- Dynamic Island -->
<!-- Status Bar -->
<div class="relative z-40 flex pt-4 pr-6 pb-4 pl-6 items-center justify-between">
<span class="sf-display text-lg font-semibold text-black font-sans">9:41</span>
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-4 h-4 text-black"><path d="M2 20h.01" class=""></path><path d="M7 20v-4" class=""></path><path d="M12 20v-8" class=""></path><path d="M17 20V8" class=""></path><path d="M22 4v16" class=""></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-black"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
<div class="relative">
<div class="w-6 h-3 border rounded-sm border-black"></div>
<div class="absolute top-0.5 left-0.5 w-4 h-2 bg-gray-950 rounded-[1px]"></div>
</div>
</div>
</div>
<!-- Navigation Bar -->
<div class="px-6 pb-4">
<div class="flex items-center justify-between">
<div class="">
<h1 class="sf-display text-3xl tracking-tight text-black font-sans font-semibold">Discover</h1>
</div>
<div class="flex items-center gap-3">
<button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-5 h-5 text-gray-700"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</button>
<button class="w-10 h-10 rounded-full flex items-center justify-center relative bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-5 h-5 text-gray-700"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
<div class="absolute -top-1 -right-1 w-5 h-5 bg-pink-500 rounded-full flex items-center justify-center">
<span class="text-xs font-semibold text-white font-sans">2</span>
</div>
</button>
</div>
</div>
</div>
<!-- Scrollable Content -->
<div class="flex-1 overflow-auto">
<div class="pr-6 pb-32 pl-6 space-y-6">
<!-- Hero Section -->
<div class="flex gap-4 pb-2">
<div class="relative overflow-hidden lg:rounded-3xl hover:border-neutral-400/50 transition-all min-h-[280px] lg:min-h-[320px] flex flex-col bg-neutral-800/60 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur-lg w-72 h-64 flex-shrink-0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600&display=swap');
</style>
<div class="relative z-10 lg:p-8 flex flex-col h-full bg-[url(https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=2160&q=80)] bg-cover pt-6 pr-6 pb-6 pl-6 justify-between">
<div class="flex items-start justify-between">
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-orange-200/90 ring-1 ring-orange-400/30 bg-orange-500/20 backdrop-blur-sm font-sans">Design</span>
<span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-amber-200/90 ring-1 ring-amber-400/30 bg-amber-500/20 backdrop-blur-sm font-sans">Premium</span>
</div>
</div>
<div class="mt-auto">
<h3 class="lg:text-5xl text-4xl text-white tracking-tight mb-2 font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Sculptural Furniture</h3>
<p class="text-sm leading-relaxed text-neutral-200/85 mb-4 font-sans">"Discover artisanal chairs that blend form and function. Each piece crafted to transform your space."</p>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500/30 to-amber-500/30 flex items-center justify-center backdrop-blur-sm">
<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" class="w-4 h-4 text-orange-200">
<path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path>
<rect x="3" y="14" width="7" height="7" rx="1" class=""></rect>
<circle cx="17.5" cy="17.5" r="3.5" class=""></circle>
</svg>
</div>
<div class="text-xs">
<div class="text-orange-200/90 font-medium font-sans">Design Studio</div>
<div class="text-amber-200/60 font-sans">Modern Seating</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden lg:rounded-3xl hover:border-neutral-400/50 transition-all min-h-[280px] lg:min-h-[320px] flex flex-col bg-neutral-800/60 rounded-2xl shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur-lg w-72 h-64 flex-shrink-0">
<div class="relative z-10 lg:p-8 flex flex-col h-full bg-cover pt-6 pr-6 pb-6 pl-6 justify-between bg-center bg-[url(https://cdn.midjourney.com/5f3f9e8e-e7c3-4c1c-8b34-9c969da13c9c/0_2.png?w=800&q=80)]">
<div class="flex items-start justify-between">
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-blue-200/90 ring-1 ring-blue-400/30 bg-blue-500/20 backdrop-blur-sm font-sans">Tech</span>
<span class="px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wider text-purple-200/90 ring-1 ring-purple-400/30 bg-purple-500/20 backdrop-blur-sm font-sans">Innovation</span>
</div>
</div>
<div class="mt-auto">
<h3 class="lg:text-5xl text-4xl text-white tracking-tight mb-2 font-semibold" style="font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;">Smart Workspace</h3>
<p class="text-sm leading-relaxed text-neutral-200/85 mb-4 font-sans">"Revolutionary workspace solutions with integrated technology. Elevate your productivity with intelligent design."</p>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500/30 to-purple-500/30 flex items-center justify-center backdrop-blur-sm">
<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" class="w-4 h-4 text-blue-200">
<rect width="16" height="10" x="2" y="3" rx="2" ry="2" class=""></rect>
<path d="m7 21 5-5 5 5" class=""></path>
</svg>
</div>
<div class="text-xs">
<div class="text-blue-200/90 font-medium font-sans">Tech Lab</div>
<div class="text-purple-200/60 font-sans">Smart Office</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Categories -->
<div class="">
<div class="flex items-center justify-between mb-4">
<h3 class="sf-display text-xl font-semibold text-black font-sans">Categories</h3>
<button class="font-medium text-blue-600 font-sans">See All</button>
</div>
<div class="flex gap-4 overflow-x-auto">
<div class="flex-shrink-0 w-20 text-center">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-2 mx-auto bg-blue-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="armchair" class="lucide lucide-armchair w-7 h-7 text-blue-600"><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" class=""></path><path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z" class=""></path><path d="M5 18v2" class=""></path><path d="M19 18v2" class=""></path></svg>
</div>
<span class="text-sm font-medium text-gray-700 font-sans">Seating</span>
</div>
<div class="flex-shrink-0 w-20 text-center">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-2 mx-auto bg-pink-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="table" class="lucide lucide-table w-7 h-7 text-purple-600"><path d="M12 3v18" class=""></path><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path></svg>
</div>
<span class="text-sm font-medium text-gray-700 font-sans">Tables</span>
</div>
<div class="flex-shrink-0 w-20 text-center">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-2 mx-auto bg-blue-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lamp-desk" class="lucide lucide-lamp-desk w-7 h-7 text-green-600"><path d="M10.293 2.293a1 1 0 0 1 1.414 0l2.5 2.5 5.994 1.227a1 1 0 0 1 .506 1.687l-7 7a1 1 0 0 1-1.687-.506l-1.227-5.994-2.5-2.5a1 1 0 0 1 0-1.414z" class=""></path><path d="m14.207 4.793-3.414 3.414" class=""></path><path d="M3 20a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" class=""></path><path d="m9.086 6.5-4.793 4.793a1 1 0 0 0-.18 1.17L7 18" class=""></path></svg>
</div>
<span class="text-sm font-medium text-gray-700 font-sans">Lighting</span>
</div>
<div class="flex-shrink-0 w-20 text-center">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-2 mx-auto bg-pink-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed-double" class="lucide lucide-bed-double w-7 h-7 text-orange-600"><path d="M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8" class=""></path><path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4" class=""></path><path d="M12 4v6" class=""></path><path d="M2 18h20" class=""></path></svg>
</div>
<span class="text-sm font-medium text-gray-700 font-sans">Bedroom</span>
</div>
<div class="flex-shrink-0 w-20 text-center">
<div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-2 mx-auto bg-blue-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cabinet" class="lucide lucide-cabinet w-7 h-7 text-purple-600"><rect width="18" height="20" x="3" y="2" rx="2" class=""></rect><path d="M3 8h18" class=""></path><path d="M3 16h18" class=""></path><path d="M8 12h.01" class=""></path><path d="M16 12h.01" class=""></path></svg>
</div>
<span class="text-sm font-medium text-gray-700 font-sans">Storage</span>
</div>
</div>
</div>
<!-- Featured Products -->
<div class="">
<div class="flex items-center justify-between mb-4">
<h3 class="sf-display text-xl font-semibold text-black font-sans">Featured</h3>
<button class="font-medium text-blue-600 font-sans">View All</button>
</div>
<div class="space-y-4">
<div class="flex gap-4 bg-gray-100 border-gray-200 border rounded-3xl pt-4 pr-4 pb-4 pl-4">
<div class="w-16 h-16 bg-gradient-mesh rounded-2xl overflow-hidden">
<img alt="Sculptural Lounge Chair" class="w-full h-full object-cover" src="https://cdn.midjourney.com/33396f65-fa4a-4904-93c5-45b662a445c8/0_1.png?w=800&q=80" style="">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black font-sans">Sculptural Lounge Chair</h4>
<p class="text-sm text-gray-500 font-sans">Organic fluid design</p>
<p class="font-bold mt-1 text-blue-600 font-sans">$299.00</p>
</div>
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<div class="flex gap-4 p-4 rounded-3xl bg-gray-50">
<div class="w-16 h-16 bg-gradient-mesh rounded-2xl overflow-hidden">
<img alt="Minimalist Side Table" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&q=80" style="">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black font-sans">Minimalist Side Table</h4>
<p class="text-sm text-gray-500 font-sans">Contemporary wood finish</p>
<p class="font-bold mt-1 text-blue-600 font-sans">$189.00</p>
</div>
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 text-white"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<div class="absolute bottom-0 left-0 right-0 ios-blur border-t bg-white/95 border-gray-200">
<div class="flex pt-2 pb-2 items-center justify-around">
<button class="flex flex-col items-center gap-1 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-6 h-6 text-blue-600"><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-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
<span class="text-xs font-medium text-blue-600 font-sans">Home</span>
</button>
<button class="flex flex-col items-center gap-1 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="grid-3x3" class="lucide lucide-grid-3x3 w-6 h-6 text-gray-500"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
<span class="text-xs font-medium text-gray-500 font-sans">Shop</span>
</button>
<button class="flex flex-col items-center gap-1 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-6 h-6 text-gray-500"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
<span class="text-xs font-medium text-gray-500 font-sans">Search</span>
</button>
<button class="flex flex-col items-center gap-1 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-6 h-6 text-gray-500"><path d="M16 10a4 4 0 0 1-8 0" class=""></path><path d="M3.103 6.034h17.794" class=""></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z" class=""></path></svg>
<span class="text-xs font-medium text-gray-500 font-sans">Cart</span>
</button>
<button class="flex flex-col items-center gap-1 py-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-6 h-6 text-gray-500"><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>
<span class="text-xs font-medium text-gray-500 font-sans">Profile</span>
</button>
</div>
<!-- Home Indicator -->
<div class="flex pb-2 justify-center">
<div class="home-indicator"></div>
</div>
</div>
</div>
</article>