Componente de restablecimiento de contraseña
Componente de restablecimiento de contraseña con diseño retro / vintage, combinación de colores de tonos tierra y nivel de complejidad complejo, para fines comerciales / corporativos, utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. Uso de picsum.photos para imágenes y randomuser.me para avatares.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
<div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
</svg>
</div>
<h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
<form action="">
<div class="mt-4">
<div>
<label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
<input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
>
</div>
<div class="mt-4">
<label class="block">
<a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
</label>
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
</div>
</div>
</form>
</div>
</div>Componentes relacionados
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña minimalista y receptivo con tonos océano/azul, diseñado para plataformas de mercado, incluida la compatibilidad con el modo oscuro.
Componente de restablecimiento de contraseña
Un componente de restablecimiento de contraseña minimalista y receptivo con tonos atardeceres/cálidos, adecuado para sitios web de comida/restaurantes, incluida la compatibilidad con el modo oscuro.
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.