Skeuomorphic_Retro_Success_Message_Component

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-stone-700 dark:to-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-[8px_8px_16px_rgba(0,0,0,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(60,60,60,0.4)] border border-yellow-300 dark:border-stone-600 transition-all duration-300 ease-in-out">

    <!-- Inner embossed area -->
    <div class="p-4 sm:p-6 bg-gradient-to-br from-yellow-50 dark:from-stone-800 to-yellow-100 dark:to-stone-900 rounded-2xl shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.5)] dark:shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.4),inset_-4px_-4px_8px_rgba(80,80,80,0.3)] border border-yellow-200 dark:border-stone-700">

      <div class="text-center space-y-5 sm:space-y-6 md:space-y-8">
        <!-- Checkmark icon - Skeuomorphic style -->
        <div class="mx-auto w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center rounded-full bg-gradient-to-br from-lime-400 to-lime-600 dark:from-green-600 dark:to-green-800 shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] transition-all duration-300 ease-in-out">
          <svg class="w-14 h-14 sm:w-16 sm:h-16 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.4)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>

        <h2 class="text-3xl sm:text-4xl font-bold text-teal-800 dark:text-teal-300 drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-colors duration-300">Order Confirmed!</h2>

        <p class="text-lg sm:text-xl text-amber-700 dark:text-amber-200 leading-relaxed drop-shadow-[0_1px_1px_rgba(0,0,0,0.05)] transition-colors duration-300">
          Your journey into timeless elegance has just begun. We've received your order and are preparing your exquisite selections. Thank you!
        </p>

        <div class="pt-4">
          <a href="#" class="inline-flex items-center justify-center px-8 py-3 sm:px-10 sm:py-4 text-lg sm:text-xl font-semibold rounded-full
             bg-gradient-to-br from-orange-400 to-orange-600 dark:from-red-600 dark:to-red-800 text-white 
             shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] 
             hover:from-orange-500 hover:to-orange-700 dark:hover:from-red-700 dark:hover:to-red-900 
             hover:shadow-[2px_2px_8px_rgba(0,0,0,0.2),-2px_-2px_8px_rgba(255,255,255,0.7)] 
             dark:hover:shadow-[2px_2px_8px_rgba(0,0,0,0.5),-2px_-2px_8px_rgba(60,60,60,0.4)] 
             transition-all duration-300 ease-in-out transform active:scale-95
             border border-orange-300 dark:border-red-500">
            Continue Browsing
          </a>
        </div>

      </div>
    </div>

    <!-- Decorative elements mimicking 'screws' or 'hinges' -->
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -top-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>
    <div class="absolute -bottom-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -bottom-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>

  </div>
</div>