retro-monochrome-product-grid

<!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
      </div>
    </div>
  </div>
</div>