Password Recovery Page - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Recuperar Contraseña</title> <style> * { margin: 0; padding: 0; box sizing: border box; font family: Arial, sans serif; } body { display: flex; justify content: center; align items: center; min height: 100vh; background: url('fon.jpg') no repeat center center/cover; /* Imagen de fondo */ } section { position: relative; width: 100%; height: 100vh; display: flex; justify content: center; align items: center; } span { position: absolute; display: block; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); animation: animate 20s linear infinite; } @keyframes animate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY( 20px); } } .signin { background color: rgba(255, 255, 255, 0.9); /* Fondo blanco con transparencia */ padding: 40px; border radius: 10px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */ max width: 400px; width: 100%; } .signin h2 { text align: center; color: #333; /* Texto gris oscuro */ margin bottom: 20px; } .signin .inputBox { margin bottom: 20px; position: relative; } .signin .inputBox input { width: 100%; padding: 12px; background color: #f0f0f0; /* Fondo gris claro para inputs */ border: 1px solid #ccc; border radius: 5px; font size: 16px; color: #333; } .signin .inputBox input:focus { border color: #007bff; /* Azul suave al enfocar */ outline: none; } .signin .inputBox i { position: absolute; left: 12px; top: 50%; transform: translateY( 50%); font style: normal; color: #aaa; pointer events: none; transition: all 0.3s; } .signin .inputBox input:focus + i, .signin .inputBox input:not(:placeholder shown) + i { top: 8px; left: 12px; font size: 12px; color: #007bff; } .signin input[type="submit"] { width: 100%; padding: 12px; background color: #007bff; /* Botón azul */ border: none; border radius: 5px; color: white; font size: 16px; cursor: pointer; } .signin input[type="submit"]:hover { background color: #0056b3; /* Oscurecer el azul al pasar el mouse */ } </style> </head> <body> <section> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> <div class="signin"> <div class="content"> <h2>Recuperar Contraseña</h2> <div class="form"> <form action="../password/forgot_password_controller.php" method="POST"> <div class="inputBox"> <input type="email" name="correo" id="correo" required> <i>Correo Electrónico</i> </div> <div class="inputBox"> <input type="submit" value="Enviar código"> </div> </form> </div> </div> </div> </section> </body> </html> añadile al codigo que cuando se mande el email para restablecer la contraseña aparezca un icono de cargando
