Skeuomorphic_Auth_CRM_Component

<div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-md bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 p-8 sm:p-10 lg:p-12 transform perspective-1000 rotateX-5 overflow-hidden transition-all duration-500
      before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-gray-100 before:via-gray-50 before:to-transparent before:opacity-20 before:pointer-events-none before:z-0
      dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-transparent dark:before:opacity-30">

    <!-- Top Skeuomorphic Element -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gradient-to-tl from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 drop-shadow-md brightness-150" 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="1.5" d="M9.75 17L9.22 17.53C8.618 18.132 8.618 19.102 9.22 19.704L14.77 25.254C15.372 25.856 16.342 25.856 16.944 25.254L22.494 19.704C23.096 19.102 23.096 18.132 22.494 17.53L21.964 17M15 15.75V9.75L15 6L18 3L21 6V9.75M9 15.75V9.75M3 15.75V9.75M12 15.75V9.75M6 15.75V9.75M12 6H15M6 6H9M18 9.75H21M3 9.75H6M9 9.75H12