Retro_Healthcare_Auth_Component

<div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-mono">
  <div class="max-w-md w-full bg-slate-100 dark:bg-slate-800 shadow-lg rounded-lg border border-slate-300 dark:border-slate-700 overflow-hidden transform transition-all duration-300 hover:scale-[1.01]">
    <div class="relative bg-gradient-to-tr from-rose-400 to-indigo-500 p-8 text-center text-white dark:from-rose-600 dark:to-indigo-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-textile.png')] opacity-20"></div>
      <h2 class="relative text-3xl sm:text-4xl font-bold mb-2 tracking-wide uppercase retro-shadow text-pink-100">MediNet</h2>
      <p class="relative text-sm sm:text-base text-gray-100">Secure Healthcare Portal</p>
    </div>
    <div class="p-6 sm:p-8">
      <h3 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6 text-center">Provider Login</h3>
      <form>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="• • • • • • • •" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200">
            <label for="remember_me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Forgot Password?</a>
        </div>
        <div>
          <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md retro-button-shadow">
            <span class="tracking-wider">SIGN IN</span>
          </button>
        </div>
      </form>
      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Need an account? 
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Register Now</a>
        </p>
      </div>
    </div>
  </div>

  <style>
    .retro-shadow {
      text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1), 8px 8px 0px rgba(0, 0, 0, 0.05);
    }
    .dark .retro-shadow {
      text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05), 8px 8px 0px rgba(255, 255, 255, 0.02);
    }
    .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
    }
    .dark .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 0.1);
    }
  </style>
</div>