E-commerce Product Badges 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Title (Optional) -->
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-8 sm:mb-12 text-gray-900 dark:text-gray-100">
    Featured Product Badges
  </h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Badge Card 1: New Arrival -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Forest Product">
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-emerald-500 to-green-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🚀 New Arrival
        </span>
      </div>
      <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Organic Green Tea</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Premium hand-picked tea leaves from sustainable farms.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">$19.99</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-lime-500 to-emerald-500 text-white font-medium shadow-md hover:from-lime-600 hover:to-emerald-600 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 2: Limited Stock / Sale -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1020/600/400" alt="Nature Product">
      <div class="absolute top-4 right-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-red-500 to-orange-500 shadow-md animate-pulse transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🔥 Limited Stock
        </span>
      </div>
      <div class="absolute bottom-4 left-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tr from-purple-500 to-pink-500 shadow-sm">
          Sale -20%
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Bamboo Eco Toothbrush</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Sustainable alternative for your daily dental care.</p>
        <div class="flex justify-between items-center">
          <div>
            <span class="text-lg font-semibold line-through text-gray-400 dark:text-gray-500 mr-2">$9.99</span>
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$7.99</span>
          </div>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 text-white font-medium shadow-md hover:from-emerald-700 hover:to-teal-800 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 3: Bestseller / Eco-Friendly -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1025/600/400" alt="River Product">
      <div class="absolute top-0 right-0 p-4">
        <svg class="w-10 h-10 text-yellow-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </div>
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🏆 Bestseller
        </span>
      </div>
      <div class="absolute bottom-4 right-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tl from-green-400 to-blue-400 shadow-sm">
          🌱 Eco-Friendly
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Reusable Water Bottle</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Durable, insulated, and stylish for everyday hydration.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">$29.50</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-700 to-green-800 text-white font-medium shadow-md hover:from-emerald-800 hover:to-green-900 transform hover:scale-105 transition-all duration-300 ease-in-out">
            View Details
          </button>
        </div>
      </div>
    </div>

  </div>
</div>