가격 표시 구성 요소

<div class="relative min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex flex-col items-center justify-center font-mono">
  <!-- Vintage TV/Monitor Frame -->
  <div class="relative bg-gray-800 dark:bg-gray-200 rounded-xl shadow-2xl p-6 md:p-12 border-8 border-gray-900 dark:border-gray-100 transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
    <div class="absolute inset-0 rounded-xl border-4 border-gray-700 dark:border-gray-300 pointer-events-none"></div>
    
    <!-- Screen/Display Area -->
    <div class="relative bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-300 dark:to-gray-500 p-4 rounded-lg shadow-inner">
      <div class="absolute inset-0 bg-black opacity-25 rounded-lg pointer-events-none"></div>
      
      <!-- Scanlines/CRT Effect -->
      <div class="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <div class="h-full w-full bg-repeating-linear-gradient-[0deg,#00000022_0px,#00000022_1px,transparent_1px,transparent_2px] animate-scanlines"></div>
      </div>

      <div class="relative z-20 text-center">
        <h2 class="text-2xl md:text-4xl font-bold text-yellow-400 dark:text-purple-600 mb-2 drop-shadow-[0_0_5px_rgba(255,255,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(128,0,128,0.7)] animate-pulseY">
          FLASH SALE!
        </h2>
        <p class="text-white text-lg md:text-2xl mb-4 font-semibold opacity-90">
          Limited Stock - Grab Yours Now!
        </p>

        <!-- Product Image & Price -->
        <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 mb-6">
          <div class="relative">
            <img src="https://picsum.photos/seed/retroproduct/300/300" alt="Retro Widget" class="w-48 h-48 md:w-64 md:h-64 object-cover rounded-lg shadow-lg border-4 border-purple-500 dark:border-yellow-400 transform hover:scale-105 transition-transform duration-300">
            <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12 shadow-md">NEW!</div>
          </div>
          
          <div class="flex flex-col items-center">
            <p class="text-xl md:text-3xl line-through text-gray-400 dark:text-gray-600 mb-1 animate-fadeIn">
              <span class="font-bold">$99.99</span>
            </p>
            <p class="text-4xl md:text-6xl font-extrabold text-green-400 dark:text-lime-400 mb-4 animate-bounceX drop-shadow-[0_0_8px_rgba(0,255,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(128,255,0,0.8)]">
              $49.99
            </p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 uppercase tracking-wider border-2 border-blue-400 dark:border-blue-800 animate-wiggle">
              Buy Now!
            </button>
          </div>
        </div>

        <!-- Call to Action / Urgency Meter -->
        <div class="bg-gray-600 dark:bg-gray-400 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
          <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-full w-3/4 rounded-full animate-fillBar"></div>
        </div>
        <p class="text-sm text-white opacity-80 animate-pulseSlight">
          Only <span class="font-bold text-yellow-300 dark:text-red-300">25%</span> of stock remaining!
        </p>
      </div>
    </div>

    <!-- Retro Knobs/Buttons -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
    </div>

    <!-- Antenna -->
    <div class="absolute -top-12 right-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform rotate-6 animate-wobble"></div>
    <div class="absolute -top-12 left-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform -rotate-6 animate-wobble"></div>
  </div>

  <!-- Tailwind JIT compatibility for custom gradients and keyframes -->
  <style>
    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    @keyframes pulseY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fillBar {
      0% { width: 0%; }
      100% { width: 75%; /* Adjust based on stock */ }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(6deg); }
      50% { transform: rotate(-6deg); }
    }
    @keyframes scanlines {
      0% { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }
    @keyframes pulseSlight {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .animate-bounceX { animation: bounceX 3s infinite ease-in-out; }
    .animate-pulseY { animation: pulseY 2s infinite ease-in-out; }
    .animate-fadeIn { animation: fadeIn 1.5s forwards; }
    .animate-fillBar { animation: fillBar 2s forwards ease-out; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-wobble { animation: wobble 4s infinite ease-in-out; }
    .animate-scanlines { animation: scanlines 10s linear infinite; }
    .animate-pulseSlight { animation: pulseSlight 3s infinite ease-in-out; }

    .bg-repeating-linear-gradient-\[0deg\,\#00000022_0px\,\#00000022_1px\,transparent_1px\,transparent_2px\] {
      background-image: repeating-linear-gradient(0deg, #00000022 0px, #00000022 1px, transparent 1px, transparent 2px);
    }
  </style>
</div>