VibeCoderzVibeCoderz
Telegram
All Prompts
Premium Product Feature Grid with CTA preview
featuresectionecommercegridctaresponsivetailwind

Premium Product Feature Grid with CTA

Секция с премиальными функциями продукта: заголовок, описание, кнопки CTA и сетка 3 столбца. Адаптивный дизайн для лендингов.

Live Preview

Prompt

<!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>
All Prompts