Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe complexe et réactif avec un style de conception monospace/développeur, avec une palette de couleurs noir et blanc avec un accent vif. Conçu pour la documentation/les sites wiki, il inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<div class="min-h-screen bg-neutral-50 font-mono text-gray-900 flex items-center justify-center p-4 sm:p-6 dark:bg-zinc-950 dark:text-gray-100">
<div class="w-full max-w-md bg-stone-100 border border-neutral-300 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-2xl dark:bg-zinc-900 dark:border-zinc-800">
<div class="flex flex-col md:flex-row">
<div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-2/5 md:flex md:flex-col md:justify-between dark:bg-zinc-800 dark:border-r dark:border-zinc-700">
<div>
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-emerald-600 dark:text-emerald-400">//RESET_PASSWORD</h2>
<p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
<span class="text-emerald-700 dark:text-emerald-500">></span> Enter your registered email address.
</p>
<p class="mb-6 text-sm text-gray-700 dark:text-gray-300">
<span class="text-red-600 dark:text-red-400">!</span> A password reset link will be sent to your inbox. Check your spam folder if necessary.
</p>
</div>
<div class="mt-8 md:mt-0">
<p class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-emerald-600 dark:text-emerald-400">></span> System uptime: <span class="text-gray-700 dark:text-gray-300">234d 12h 34m 56s</span>
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
<span class="text-emerald-600 dark:text-emerald-400">></span> Logged in as: <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
</p>
</div>
</div>
<div class="w-full p-6 sm:p-8 md:w-1/2 lg:w-3/5 border-t border-neutral-300 md:border-t-0 md:border-l dark:border-zinc-800">
<form class="space-y-6">
<div>
<label for="email" class="block text-xs font-medium text-gray-700 uppercase tracking-wider mb-1 dark:text-gray-300">
user@domain:~$ _
</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
placeholder="[email protected]"
class="appearance-none block w-full px-3 py-2 border border-gray-400 rounded-md shadow-sm placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-zinc-700 dark:border-zinc-600 dark:text-gray-100 dark:placeholder-gray-400"
/>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="terms"
name="terms"
type="checkbox"
class="focus:ring-emerald-500 h-4 w-4 text-emerald-600 border-gray-400 rounded dark:bg-zinc-700 dark:border-zinc-600"
/>
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
<span class="text-emerald-600 dark:text-emerald-400">[</span> I understand this action <span class="text-red-700 dark:text-red-500">cannot be undone</span> <span class="text-emerald-600 dark:text-emerald-400">]</span>
</label>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-700 dark:hover:bg-emerald-600 dark:focus:ring-emerald-600"
>
<span class="">EXECUTE_RESET_COMMAND</span>
<span class="ml-2 text-white/50 dark:text-white/40">$PWD_RESET</span>
</button>
</div>
<div class="text-center">
<a href="#" class="text-sm text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300">
<span class="text-emerald-600 dark:text-emerald-400"><</span> Go back to login screen
</a>
</div>
</form>
</div>
</div>
</div>
</div>Composants associés
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe avec un design rétro/vintage, une palette de couleurs de tons de terre et un niveau de complexité complexe, à des fins commerciales/d’entreprise, à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind. Utilisation de picsum.photos pour les images et de randomuser.me pour les avatars.
Composant de réinitialisation de mot de passe
Composant de réinitialisation de mot de passe de conception minimaliste / plate avec des tons de terre, adapté aux plateformes immobilières. Il dispose d’une mise en page réactive, d’une prise en charge du mode sombre et de plusieurs champs de saisie pour une interface complexe.
Composant de réinitialisation de mot de passe
Un composant de réinitialisation de mot de passe minimaliste avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.