Загрузка...
Секция с премиальными функциями продукта: заголовок, описание, кнопки CTA и сетка 3 столбца. Адаптивный дизайн для лендингов.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Feature Section</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Godfather's Touch: Smooth font rendering for premium feel */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body class="bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
<div class="md:flex md:items-center md:justify-between mb-12">
<div class="max-w-2xl">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Premium Essentials for<br />Everyday Life
</h2>
<p class="mt-4 text-lg text-gray-500">
Premium essentials for everyday life, meticulously crafted for those who seek quality and sophistication in
every aspect of their daily routines.
</p>
<div class="mt-8 flex gap-4">
<button class="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center gap-2">
Shop now
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</button>
<button class="border border-gray-300 text-gray-700 px-6 py-2.5 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-200">
Learn more
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
<div class="group relative">
<div class="aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-2xl bg-gray-100 relative">
<span class="absolute top-4 left-4 bg-gray-900/80 text-white text-xs font-semibold px-2.5 py-1 rounded-md z-10">New!</span>
<img src="https://images.unsplash.com/photo-1558403194-611308249627?q=80&w=2070&auto=format&fit=crop"
alt="Smart Speaker"
class="h-64 w-full object-cover object-center group-hover:scale-105 transition-transform duration-300 ease-out">
</div>
<div class="mt-4">
<h3 class="text-lg font-bold text-gray-900">QuantumSound</h3>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">
Smart speaker with voice assistant integration and premium sound quality, elevating your home audio
experience.
</p>
<p class="mt-2 text-lg font-medium text-gray-900">$199</p>
</div>
</div>
<div class="group relative">
<div class="aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-2xl bg-gray-100 relative">
<span class="absolute top-4 left-4 bg-gray-900/80 text-white text-xs font-semibold px-2.5 py-1 rounded-md z-10">New!</span>
<img src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?q=80&w=2070&auto=format&fit=crop"
alt="4K Monitor"
class="h-64 w-full object-cover object-center group-hover:scale-105 transition-transform duration-300 ease-out">
</div>
<div class="mt-4">
<h3 class="text-lg font-bold text-gray-900">Nano Display Retina</h3>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">
4K Ultra HD monitor with HDR support and ultra-thin bezels, delivering crystal-clear visuals for
professionals.
</p>
<p class="mt-2 text-lg font-medium text-gray-900">$999</p>
</div>
</div>
<div class="group relative">
<div class="aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-2xl bg-gray-100 relative">
<span class="absolute top-4 left-4 bg-gray-900/80 text-white text-xs font-semibold px-2.5 py-1 rounded-md z-10">New!</span>
<img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=2070&auto=format&fit=crop"
alt="Action Camera"
class="h-64 w-full object-cover object-center group-hover:scale-105 transition-transform duration-300 ease-out">
</div>
<div class="mt-4">
<h3 class="text-lg font-bold text-gray-900">VortexCam 360</h3>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">
360-degree action camera with waterproof housing, perfect for capturing every adventure in stunning detail.
</p>
<p class="mt-2 text-lg font-medium text-gray-900">$599</p>
</div>
</div>
</div>
</div>
</body>
</html>