A list of produ... - Tailwind AI

Alessandro Bertozzi
<body class="bg-gray-100 font-sans leading-normal tracking-normal py-10">
  <div class="container mx-auto px-4">
    <h1 class="text-3xl font-bold text-center mb-8">Product Categories</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 1</h2>
          <p class="text-gray-600">This is a brief description of Category 1. It includes various products that cater to your needs.</p>
        </div>
      </div>
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 2</h2>
          <p class="text-gray-600">This is a brief description of Category 2. Explore a wide range of products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 3</h2>
          <p class="text-gray-600">This is a brief description of Category 3. Discover unique items that fit your lifestyle.</p>
        </div>
      </div>
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 4" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 4</h2>
          <p class="text-gray-600">This is a brief description of Category 4. Find the best products tailored for you.</p>
        </div>
      </div>
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 5" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 5</h2>
          <p class="text-gray-600">This is a brief description of Category 5. Explore our exclusive collection of products.</p>
        </div>
      </div>
      <div class="bg-white shadow-2xl rounded-xl overflow-hidden transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 6" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">Category 6</h2>
          <p class="text-gray-600">This is a brief description of Category 6. Check out the latest trends and offers.</p>
        </div>
      </div>
    </div>
  </div>
</body>
A list of product categories with image, name and description.
