A list of produ... - Tailwind AI

Segey
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
  <div class="max-w-6xl mx-auto py-8">
    <h1 class="text-3xl font-bold mb-6 text-center">Product Categories</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 1" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 1</h2>
          <p class="text-gray-700">This is a description for Category 1. It provides an overview of the products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 2" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 2</h2>
          <p class="text-gray-700">This is a description for Category 2. It provides an overview of the products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 3" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 3</h2>
          <p class="text-gray-700">This is a description for Category 3. It provides an overview of the products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 4" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 4</h2>
          <p class="text-gray-700">This is a description for Category 4. It provides an overview of the products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 5" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 5</h2>
          <p class="text-gray-700">This is a description for Category 5. It provides an overview of the products available in this category.</p>
        </div>
      </div>
      <div class="bg-white shadow-lg rounded-lg p-6">
        <img src="https://placehold.co/300x200" alt="Category 6" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-4">
          <h2 class="text-xl font-bold mb-2">Category 6</h2>
          <p class="text-gray-700">This is a description for Category 6. It provides an overview of the products available in this category.</p>
        </div>
      </div>
    </div>
  </div>
</body>
A list of product categories with image, name and description.
