아르데코 캔디 제품 카드

<div class="p-4 sm:p-8 bg-pink-50 dark:bg-gray-900 min-h-screen flex justify-center items-center font-serif">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl w-full">

    <!-- Product Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-pink-300 dark:border-blue-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-400 dark:from-purple-700 dark:via-blue-600 dark:to-cyan-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
        <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-pink-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>

      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-purple-600 dark:to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M8 4a3 3 0 00-3 3v2H2a2 2 0 00-2 2v5a2 2 0 002 2h16a2 2 0 002-2v-5a2 2 0 00-2-2h-3V7a3 3 0 00-3-3H8zM5 7a1 1 0 011-1h8a1 1 0 011 1v2H5V7zm10 4H5v5h10v-5z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300 mb-2 tracking-wide">Sweet Serenity</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Your moment of tranquil bliss.</p>
        
        <div class="border-t border-b border-pink-200 dark:border-blue-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 60 Mins Session</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Flexible Schedule</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-cyan-400 mb-6">$120</p>

        <button class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-purple-800 dark:to-blue-800 text-white font-bold rounded-lg shadow-lg hover:from-pink-600 hover:to-purple-600 dark:hover:from-purple-700 dark:hover:to-blue-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-blue-600">
          Book Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-mint-300 dark:border-purple-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-mint-400 via-blue-300 to-pink-400 dark:from-blue-700 dark:via-cyan-600 dark:to-purple-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-mint-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-mint-300 to-blue-300 dark:from-blue-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.672 1.911a1.102 1.102 0 011.656 0L10 3.333l1.672-1.422a1.102 1.102 0 011.656 0L14.414 4H17a1 1 0 011 1v9a1 1 0 01-1 1h-3.414l-1.656 1.422a1.102 1.102 0 01-1.656 0L10 16.667l-1.672-1.422-1.656 1.422a1.102 1.102 0 01-1.656 0L2.586 15H1a1 1 0 01-1-1V5a1 1 0 011-1h2.586l1.672-1.422zM2 6v7h16V6H2zm8 3a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-mint-600 dark:text-mint-300 mb-2 tracking-wide">Gleaming Glow</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Radiate from the inside out.</p>

        <div class="border-t border-b border-mint-200 dark:border-purple-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 90 Mins Treatment</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Weekend Slots</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-pink-500 dark:text-purple-400 mb-6">$180</p>

        <button class="w-full py-4 bg-gradient-to-r from-mint-500 to-blue-500 dark:from-blue-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-mint-600 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-mint-400 dark:focus:ring-purple-600">
          Reserve Spot
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-blue-300 dark:border-cyan-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-400 via-pink-300 to-mint-400 dark:from-cyan-700 dark:via-purple-600 dark:to-blue-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-blue-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-blue-300 to-pink-300 dark:from-cyan-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm11.59 10.37L12 18.06V20h4v-1.94l-3.59-3.69z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M8 10a2 2 0 11-4 0 2 2 0 014 0zm10.59 4.37L16 18.06V20h4v-1.94l-3.59-3.69zM12 10a2 2 0 11-4 0 2 2 0 014 0zm.59-4.37L16 2.06V0h4v1.94l-3.59 3.69z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-2 tracking-wide">Jubilee Journey</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">An unforgettable personal retreat.</p>

        <div class="border-t border-b border-blue-200 dark:border-cyan-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 120 Mins Deluxe</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Priority Booking</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-blue-400 mb-6">$250</p>

        <button class="w-full py-4 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-cyan-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-blue-600 hover:to-cyan-600 dark:hover:from-cyan-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-cyan-600">
          Schedule Now
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* This custom CSS is for the artistic border using clip-path, 
     as Tailwind currently does not support arbitrary clip-path values directly. */
  .clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  }
</style>