Компонент-контейнер

<div class="container mx-auto p-4 bg-gray-900 text-gray-100">
  <div class="dark:bg-gray-800 rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4 dark:text-gray-200">Product Listing</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 1</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$19.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 2</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$29.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 3</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$39.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>