A list of produ... - Tailwind AI

True Banana
<body class="bg-gray-200 font-sans leading-normal tracking-normal py-10">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl font-bold text-center mb-8 text-purple-600">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 p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 1" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-box text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 1</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 1, highlighting its features and benefits.</p>
      </div>
      <div class="bg-white shadow-2xl rounded-xl p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 2" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-laptop text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 2</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 2, highlighting its features and benefits.</p>
      </div>
      <div class="bg-white shadow-2xl rounded-xl p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 3" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-mobile-alt text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 3</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 3, highlighting its features and benefits.</p>
      </div>
      <div class="bg-white shadow-2xl rounded-xl p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 4" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-headphones-alt text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 4</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 4, highlighting its features and benefits.</p>
      </div>
      <div class="bg-white shadow-2xl rounded-xl p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 5" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-camera text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 5</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 5, highlighting its features and benefits.</p>
      </div>
      <div class="bg-white shadow-2xl rounded-xl p-6 transition-transform transform hover:scale-105">
        <img src="https://www.tailwindai.dev/placeholder.svg" alt="Category 6" class="w-full h-32 object-cover rounded-lg mb-4">
        <div class="flex items-center mb-2">
          <i class="fa-solid fa-gamepad text-purple-500 mr-2"></i>
          <h2 class="text-2xl font-semibold text-gray-800">Category 6</h2>
        </div>
        <p class="text-gray-700">This is a brief description of Category 6, highlighting its features and benefits.</p>
      </div>
    </div>
  </div>
</body>
Modify colors
