레트로쇼핑카트구성 요소

<div class="font-sans antialiased text-[#222831] bg-[#FDF0D5] dark:bg-[#001D3D] dark:text-[#E0FBFC] min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-[#F6AE2D] dark:bg-[#003566] p-6 sm:p-8 rounded-lg shadow-xl border-4 border-[#00A1AB] dark:border-[#FFC300] transform transition duration-300 hover:scale-[1.01] overflow-hidden">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-[#001D3D] dark:text-[#E0FBFC] mb-6 sm:mb-8 text-center uppercase tracking-wide border-b-4 border-[#001D3D] dark:border-[#FFC300] pb-2">
      Your Groovy Cart
    </h1>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=1" alt="Vintage Gadget" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Retro Boombox</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Classic sound, modern vibe.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$129.99</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">1</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
        <img src="https://picsum.photos/100/100?random=2" alt="Vintage Toy" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
        <div class="flex-1 text-center sm:text-left">
          <h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Pixelated Game Cartridge</h2>
          <p class="text-sm text-[#393E46] dark:text-gray-300">Unlock endless 8-bit adventures.</p>
          <div class="flex items-center justify-center sm:justify-start mt-2">
            <p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$39.50</p>
            <div class="flex items-center space-x-2">
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
              <span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">2</span>
              <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
            </div>
          </div>
        </div>
        <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-[#FDF0D5] dark:bg-[#001D3D] p-6 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] mb-8">
      <h2 class="text-2xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-4 text-center border-b-2 border-[#F6AE2D] dark:border-[#FFC300] pb-2">Cart Totals</h2>
      <div class="flex justify-between items-center text-lg mb-2">
        <span class="text-[#393E46] dark:text-gray-300">Subtotal:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="subtotal">$208.99</span>
      </div>
      <div class="flex justify-between items-center text-lg mb-4">
        <span class="text-[#393E46] dark:text-gray-300">Shipping:</span>
        <span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="shipping">$7.50</span>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t-2 border-[#F6AE2D] dark:border-[#FFC300] pt-4">
        <span class="text-[#001D3D] dark:text-[#E0FBFC]">Total:</span>
        <span class="text-[#00A1AB] dark:text-[#FFC300]" id="total">$216.49</span>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Continue Shopping
      </button>
      <button class="bg-[#00A1AB] dark:bg-[#2A9D8F] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#007D88] dark:hover:bg-[#3DDC84] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
        Proceed to Checkout
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </button>
    </div>

    <p class="text-center text-xs mt-8 text-[#393E46] dark:text-gray-400">
      Embrace the past, shop the future.
    </p>
  </div>
</div>