Luxury_Tabs_Component

<div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
      <button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
        <span class="block">New Arrivals</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">Best Sellers</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">On Sale</span>
      </button>
    </div>

    <div class="p-6 md:p-8">
      <!-- Tab Content 1: New Arrivals -->
      <div class="space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
            </div>
          </div>
        </div>
        <div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
            <div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
        </div>
      </div>

      <!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
      <!-- Add 'hidden' class to hide, remove to show -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
            </div>
          </div>
        </div>
      </div> -->

    </div>
  </div>
</div>