Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña receptivo con diseño de neumorfismo, compatibilidad con modo oscuro y sin JavaScript.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
<div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
<h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
<form>
<div class="mb-6">
<label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
<input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
</div>
<div class="mb-6">
<label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
Reset Password
</button>
</form>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
}
.shadow-neumorphic-input {
box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
}
.dark .shadow-neumorphic-input-dark {
box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
}
.shadow-neumorphic-button {
box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
}
</style>Componentes relacionados
Componente de restablecimiento de contraseña
Un componente minimalista de restablecimiento de contraseña con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña diseñado con un estilo skeuomórfico, que utiliza tonos tierra para una estética natural y estructurado para aplicaciones de tablero. Es compatible con el modo oscuro y responde.
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña de diseño minimalista y plano con tonos tierra, diseño receptivo y soporte para temas oscuros, adaptado al contenido del blog.