Login

form

Looking for a sleek, production-ready React form component. This customizable form component is built with Tailwind CSS and React, offering a perfect blend of style and functionality
<form class="max-w-md mx-auto bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <div class="mb-6">
    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
      Email Address
    </label>
    <input 
      type="email" 
      id="email" 
      class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
      placeholder="example@email.com" 
      aria-describedby="email-description"
      required 
    />
    <p id="email-description" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      We will never share your email with anyone else.
    </p>
  </div>
  
  <div class="mb-6">
    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
      Password
    </label>
    <input 
      type="password" 
      id="password" 
      class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
      placeholder="••••••••" 
      aria-describedby="password-description"
      required 
    />
    <p id="password-description" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
      Must be at least 8 characters.
    </p>
  </div>
  
  <div class="flex items-center mb-6">
    <input 
      id="remember" 
      type="checkbox" 
      class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" 
    />
    <label for="remember" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
      Remember me
    </label>
  </div>
  
  <button 
    type="submit" 
    class="w-full sm:w-auto px-5 py-2.5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    Submit
  </button>
</form>