Componente del formulario de registro

<div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
          Register
        </button>
      </div>
    </form>
  </div>
</div>