Skeuomorphic_Fashion_Card

<div class="flex justify-center items-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950">
  <div class="w-full max-w-sm mx-auto rounded-3xl p-6
              bg-gradient-to-br from-blue-100 to-blue-300 shadow-2xl shadow-blue-400/50
              dark:from-blue-900 dark:to-blue-700 dark:shadow-blue-950/80
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-blue-500/60 dark:hover:shadow-blue-900/90
              relative overflow-hidden border-2 border-blue-200 dark:border-blue-800">

    <!-- Inner Bevel Top-Left -->
    <div class="absolute inset-0 rounded-3xl
                shadow-inner shadow-blue-50/50 dark:shadow-blue-800/50
                pointer-events-none"
         style="box-shadow: inset 5px 5px 10px rgba(255,255,255,0.3), inset -5px -5px 10px rgba(0,0,0,0.1);">
    </div>

    <!-- Inner Bevel Bottom-Right for Dark Mode -->
    <div class="absolute inset-0 rounded-3xl
                dark:shadow-inner dark:shadow-blue-950/50
                pointer-events-none"
         style="box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.1);">
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-32 h-32 rounded-full overflow-hidden mb-4
                  border-4 border-blue-300 dark:border-blue-700
                  shadow-xl shadow-blue-400/40 dark:shadow-blue-950/70
                  transform transition-all duration-300 hover:scale-105">
        <img src="https://picsum.photos/id/78/200/200" alt="Product Image" class="w-full h-full object-cover">
      </div>

      <h3 class="text-xl md:text-2xl font-bold mb-2 text-blue-800 dark:text-blue-200 drop-shadow-md">
        AquaBloom Moisturizer
      </h3>
      <p class="text-sm text-blue-700 dark:text-blue-300 mb-4 px-2 tracking-wide">
        Infused with deep-sea minerals for radiant, hydrated skin.
      </p>

      <div class="mb-4">
        <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100 drop-shadow-lg">$49.99</span>
      </div>

      <button type="button" class="w-full px-6 py-3 rounded-full text-lg font-semibold
                  bg-gradient-to-br from-blue-600 to-blue-800 text-white
                  shadow-xl shadow-blue-700/50 dark:shadow-blue-900/70
                  active:bg-gradient-to-tl active:from-blue-700 active:to-blue-900
                  transform transition-all duration-200
                  hover:scale-[1.02] hover:shadow-blue-800/60 dark:hover:shadow-blue-800/80
                  relative overflow-hidden
                  before:absolute before:inset-0 before:bg-white before:bg-opacity-0 hover:before:bg-opacity-10 before:rounded-full before:transition-all before:duration-300">
        Add to Cart
      </button>
      <div class="mt-4 flex gap-x-2 text-blue-700 dark:text-blue-300">
        <svg class="w-5 h-5" 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.817 2.042a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.042a1 1 0 00-1.176 0l-2.817 2.042c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span>4.8 (120 reviews)</span>
      </div>
    </div>
  </div>
</div>