Monospace_Dating_Login_Signup_Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border-2 border-gray-900 dark:border-gray-100 font-mono">
    <div class="bg-gray-900 dark:bg-gray-100 text-green-400 dark:text-gray-900 p-3 flex items-center justify-between text-sm">
      <span class="flex items-center">
        <span class="h-2 w-2 rounded-full bg-red-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-yellow-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-green-500"></span>
      </span>
      <span class="terminal-title">_date_terminal.sh</span>
      <span></span>
    </div>
    <div class="p-6 lg:p-8">
      <h2 class="text-2xl lg:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">
        <span class="text-green-500 dark:text-pink-500">_</span>CONNECT
      </h2>

      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          username:
        </label>
        <input type="text" id="username" placeholder="_your_handle_here" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          password:
        </label>
        <input type="password" id="password" placeholder="_secret_chars_" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="flex flex-col space-y-3">
        <button type="button" class="bg-green-500 hover:bg-green-600 dark:bg-pink-500 dark:hover:bg-pink-600 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          LOGIN_()
        </button>
        <button type="button" class="bg-gray-700 hover:bg-gray-900 dark:bg-gray-200 dark:hover:bg-gray-50 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          SIGNUP_()
        </button>
      </div>

      <div class="mt-6 text-center text-sm">
        <a href="#" class="inline-block align-baseline font-bold text-green-500 hover:text-green-800 dark:text-pink-500 dark:hover:text-pink-800 transition-colors duration-200">
          _FORGOT_PW?
        </a>
      </div>
    </div>
  </div>
</div>