Bauhaus_E-commerce_Media_Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 bg-white dark:bg-gray-800 shadow-lg rounded-none overflow-hidden">

    <!-- Product Image Section -->
    <div class="relative col-span-1 md:col-span-2 lg:col-span-1 border-b-2 md:border-r-2 lg:border-r-2 md:border-b-0 border-gray-200 dark:border-gray-700 p-4 sm:p-6 grid place-items-center">
      <img src="https://picsum.photos/id/1018/800/600" alt="Modern Product Image" class="w-full h-auto object-cover max-h-96 md:max-h-full aspect-square" loading="lazy">
      <div class="absolute top-0 left-0 bg-yellow-400 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 text-xs font-semibold uppercase tracking-wider -rotate-45 -translate-x-6 translate-y-6 pt-4 pr-4">
        New
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="p-4 sm:p-6 lg:p-8 flex flex-col justify-between col-span-1">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-4 leading-tight">
          Geometric Lamp
        </h2>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-4 sm:mb-6 leading-relaxed">
          A fusion of form and function. This lamp embodies the Bauhaus principle of design simplicity and utility.
        </p>
        <div class="flex items-baseline mb-4 sm:mb-6">
          <span class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mr-2">$199.99</span>
          <span class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 line-through">$249.99</span>
        </div>
        <div class="mb-4 sm:mb-6">
          <h3 class="text-sm uppercase tracking-wide font-semibold text-gray-700 dark:text-gray-300 mb-2">Color</h3>
          <div class="flex space-x-2">
            <button aria-label="Select black color" class="w-8 h-8 rounded-full bg-gray-900 dark:bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select white color" class="w-8 h-8 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 ring-2 ring-gray-900 dark:ring-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select gray color" class="w-8 h-8 rounded-full bg-gray-500 dark:bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-lg font-bold uppercase tracking-wider shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Add to Cart
        </button>
        <button aria-label="Add to Wishlist" class="py-3 px-6 border-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 text-lg font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white dark:hover:bg-gray-100 dark:hover:text-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Additional Information / Reviews Section -->
    <div class="p-4 sm:p-6 lg:p-8 col-span-1 lg:col-span-1 border-t-2 md:border-t-0 lg:border-t-0 md:border-l-2 border-gray-200 dark:border-gray-700 flex flex-col justify-between">
      <div>
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Product Features</h3>
        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300 mb-6">
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Durable Steel Structure</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Adjustable Brightness</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Energy Efficient LED</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Minimalist Design Aesthetic</li>
        </ul>

        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Customer Reviews</h3>
        <div class="flex items-center text-gray-800 dark:text-gray-200 mb-4">
          <div class="flex text-yellow-400 dark:text-yellow-500 mr-2">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
          </div>
          <span class="text-sm italic">(45 Reviews)</span>
        </div>

        <article class="bg-gray-50 dark:bg-gray-700 p-4 rounded-none border border-gray-200 dark:border-gray-600 mb-4">
          <div class="flex items-center mb-2">
            <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchase</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">"Absolutely love the design! Fits perfectly with my minimalist interior. The light is soft but bright enough for reading."</p>
        </article>
      </div>
    </div>

  </div>
</div>