All Prompts
All Prompts
sectiongridtailwindresponsiveanimatedfeaturehover
Animated Restaurant Feature Grid Section
Анимированная секция-сетка для ресторана на Tailwind CSS. Отображает преимущества заведения с эффектами появления и при наведении. Идеально для лендингов.
Prompt
<section class="relative z-10 max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pt-8 pr-4 pb-20 pl-4">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-8 opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.1s">
<div class="">
<p class="text-sm font-medium text-[#000000]/50 font-playfair">What makes us special</p>
<h2 class="sm:text-4xl md:text-5xl text-3xl font-medium text-[#000000] tracking-tight font-playfair">Authentic Italian dining experience</h2>
<p class="sm:text-lg max-w-[85ch] text-base text-neutral-600 mt-4">From traditional family recipes to warm hospitality, every detail is crafted to transport you to the heart of Italy.</p>
</div>
</div>
<div class="grid gap-6 md:grid-cols-3">
<!-- Big feature -->
<div class="group relative overflow-hidden md:col-span-2 md:row-span-2 bg-zinc-900 border-white/10 border rounded-2xl cursor-pointer transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl hover:shadow-black/20 opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.2s">
<div class="relative overflow-hidden">
<img src="https://cdn.midjourney.com/e50840f8-f672-432e-aa8c-06ecdd161aeb/0_0.png?w=800&q=80" alt="Fresh pasta being made by hand" class="aspect-video w-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent transition-opacity duration-500 group-hover:from-black/50"></div>
<div class="absolute inset-0 bg-gradient-to-r from-amber-500/0 via-amber-500/10 to-amber-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<div class="sm:p-6 pt-5 pr-5 pb-5 pl-5 transform transition-transform duration-300 group-hover:translate-y-[-2px]">
<div class="flex items-center gap-2">
<span class="inline-flex items-center text-[11px] font-medium text-slate-50 font-inter bg-slate-50/5 border-slate-50/10 border rounded-full pt-0.5 pr-2 pb-0.5 pl-2 transition-all duration-300 group-hover:bg-amber-500/20 group-hover:border-amber-400/30 group-hover:text-amber-200">ROOFTOP</span>
<span class="text-xs text-white/60 font-inter transition-colors duration-300 group-hover:text-white/80">Panoramic city views</span>
</div>
<h3 class="mt-3 text-2xl sm:text-3xl font-medium tracking-tight font-playfair text-white transition-colors duration-300 group-hover:text-amber-100">Dine among the clouds with breathtaking rooftop views</h3>
<p class="mt-2 text-sm sm:text-base text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Experience the city's most luxurious rooftop dining with stunning 360-degree views of Milano's skyline. Watch the sunset paint the Duomo golden while savoring authentic Italian cuisine in our elegant sky-high terrace.</p>
<div class="mt-5 flex flex-wrap items-center gap-3 transform transition-all duration-300 group-hover:translate-x-1">
<a href="#rooftop" class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur hover:bg-white/10 font-inter transition-all duration-300 hover:scale-105 hover:border-amber-400/30">
<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="h-4 w-4 transition-transform duration-300 hover:rotate-12"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><path d="M21 6H3" class=""></path><path d="M21 10H3" class=""></path><path d="M21 14H3" class=""></path><path d="M21 18H3" class=""></path></svg>
View rooftop menu
</a>
<a href="#contact" class="inline-flex items-center gap-2 text-sm font-medium text-black font-inter bg-amber-500 rounded-lg px-4 py-2 hover:bg-amber-400 transition-all duration-300 hover:scale-105 hover:shadow-lg">
<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="h-4 w-4 transition-transform duration-300 hover:rotate-12"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
Reserve terrace table
</a>
</div>
</div>
</div>
<!-- Right column: Wood-fired pizza -->
<div class="group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-0 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.3s">
<div class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
<div class="flex items-center justify-between">
<h3 class="text-xl font-medium tracking-tight font-playfair text-white flex items-center gap-2 transition-colors duration-300 group-hover:text-orange-200">
Wood-fired pizza
</h3>
<span class="inline-flex items-center text-[11px] font-medium text-slate-50 font-inter bg-slate-50/5 border-slate-50/10 border rounded-full pt-0.5 pr-2 pb-0.5 pl-2 transition-all duration-300 group-hover:bg-orange-500/20 group-hover:border-orange-400/30 group-hover:text-orange-200">TRADITIONAL</span>
</div>
<p class="mt-2 text-sm text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Authentic Neapolitan pizza baked in our imported wood-fired oven at 900°F for the perfect crispy crust.</p>
<div class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
<img src="https://cdn.midjourney.com/67a6057f-f9f9-401a-a088-d4e35935b996/0_0.png?w=800&q=80" alt="Wood-fired pizza oven" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
</div>
<!-- Right column: Wine selection -->
<div class="group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.4s">
<div class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
<div class="flex items-center justify-between">
<h3 class="text-xl font-medium tracking-tight font-playfair text-white flex items-center gap-2 transition-colors duration-300 group-hover:text-purple-200">
Curated wine selection
</h3>
<span class="inline-flex items-center text-[11px] font-medium text-slate-50 font-inter bg-slate-50/5 border-slate-50/10 border rounded-full pt-0.5 pr-2 pb-0.5 pl-2 transition-all duration-300 group-hover:bg-purple-500/20 group-hover:border-purple-400/30 group-hover:text-purple-200">SOMMELIER</span>
</div>
<p class="mt-2 text-sm text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Over 200 Italian wines carefully selected from renowned vineyards across Tuscany, Piedmont, and Veneto.</p>
<div class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
<img src="https://cdn.midjourney.com/f7dd88bb-8704-471e-935e-2bc2e8b70c1c/0_0.png?w=800&q=80" alt="Italian wine cellar" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
</div>
<!-- Bottom small: Family atmosphere -->
<div class="group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.5s">
<div class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
<h3 class="text-lg font-medium tracking-tight font-playfair text-white flex items-center gap-2 transition-colors duration-300 group-hover:text-green-200">
Family atmosphere
<span class="ml-2 inline-flex items-center rounded-full border border-green-500/30 bg-green-500/15 px-2 py-0.5 text-[11px] font-medium text-green-300 font-inter transition-all duration-300 group-hover:bg-green-500/25 group-hover:border-green-400/50 group-hover:animate-pulse">WARM</span>
</h3>
<p class="mt-2 text-sm text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Experience the warmth of Italian hospitality where every guest is treated like family.</p>
<div class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
<img src="https://cdn.midjourney.com/cd7dcc46-3425-4003-a9db-e07773d935e3/0_0.png?w=800&q=80" alt="Cozy restaurant interior" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
</div>
<!-- Bottom small: Craft cocktails -->
<div class="group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.6s">
<div class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
<h3 class="text-lg font-medium tracking-tight font-playfair text-white flex items-center gap-2 transition-colors duration-300 group-hover:text-amber-200">
Craft cocktails
</h3>
<p class="mt-2 text-sm text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Expertly crafted Italian cocktails featuring premium spirits, fresh herbs, and house-made bitters inspired by classic aperitivos.</p>
<div class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
<img src="https://cdn.midjourney.com/fc61e2fd-de4d-4947-b7d0-865bb7c926a0/0_0.png?w=800&q=80" alt="Italian craft cocktails" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
</div>
<div class="group sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl opacity-0 animate-[fadeInUp_0.8s_ease-out_forwards]" style="animation-delay: 0.7s">
<div class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
<h3 class="text-lg font-medium tracking-tight font-playfair text-white flex items-center gap-2 transition-colors duration-300 group-hover:text-blue-200">
Private dining
</h3>
<p class="mt-2 text-sm text-white/70 font-inter transition-colors duration-300 group-hover:text-white/80">Intimate private dining rooms perfect for celebrations, business dinners, and special occasions.</p>
<div class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
<img src="https://cdn.midjourney.com/56a65816-1f8f-4e27-8718-5cd023b569da/0_0.png?w=800&q=80" alt="Private dining room" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
</div>
</div>
</div>
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</section>