E-commerce Components 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-warm-gray-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-2 border-stone-200 dark:border-stone-700 relative">
    <!-- Paper texture overlay (pseudo-element for better control) -->
    <div class="absolute inset-0 z-0 pointer-events-none opacity-40 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20 20.5a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5zM20 0a.5.5 0 011 0v20a.5.5 0 01-1 0V0zM0 20a.5.5 0 010 1h20a.5.5 0 010-1H0zM0 0a.5.5 0 010 1h20a.5.5 0 010-1H0zM20 0a.5.5 0 01.5-.5h-1a.5.5 0 01.5.5zM0 20a.5.5 0 01-.5-.5v1a.5.5 0 01.5-.5z\'%3E%3C/path%3E%3C/svg%3E'); background-size: 10px 10px; opacity: 0.1; background-color: rgba(255, 255, 255, 0.5);">
    </div>

    <div class="relative z-10">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Property Thumbnail">
      <div class="absolute top-2 right-2 bg-stone-700/80 text-white text-xs px-2 py-1 rounded-sm tracking-wide font-sans">
        FOR SALE
      </div>

      <div class="p-4">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">
          Charming Suburban Retreat
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 tracking-wide">
          123 Harmony Lane, Willow Creek
        </p>

        <div class="flex items-center justify-between mb-4">
          <span class="text-2xl font-extrabold text-green-700 dark:text-green-400">
            $450,000
          </span>
          <div class="flex space-x-3 text-stone-700 dark:text-stone-300">
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1.586l3.293 3.293a1 1 0 01-1.414 1.414L10 6.414 7.121 9.293a1 1 0 11-1.414-1.414L9 4.586V3a1 1 0 011-1zM2 10a8 8 0 1116 0 8 8 0 01-16 0zm8 4a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              3 Beds
            </div>
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110 4 2 2 0 010-4z"></path><path fill-rule="evenodd" d="M4 0h12a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2zm0 2v5h12V2H4zM2 9v9a2 2 0 002 2h12a2 2 0 002-2V9H2z" clip-rule="evenodd"></path></svg>

              2 Baths
            </div>
          </div>
        </div>

        <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200 shadow-sm
                       dark:bg-orange-600 dark:hover:bg-orange-700">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>