Componente de autenticación
Componente de autenticación de estilo neumorfismo para comercio electrónico, con un esquema de color triádico y un diseño simple. Admite el modo oscuro y responde. Utiliza Tailwind CSS. Sin JavaScript.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="p-8 bg-white dark:bg-gray-700 rounded-xl shadow-lg dark:shadow-none">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Email</label>
<input type="email" id="email" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300">Password</label>
<input type="password" id="password" class="mt-1 block w-full px-3 py-2 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-900 dark:text-white">
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center">
<input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-600 dark:border-gray-500">
</div>
<div class="ml-2 text-sm">
<label for="remember_me" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
</div>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
</div>
</div>
<div class="mt-6">
<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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
Sign in
</button>
</div>
</form>
</div>
</div>
Componentes relacionados
ArtDecoAuthComponent
Componente de autenticación inspirado en el art Deco para aplicaciones médicas/de atención médica, con patrones geométricos, colores de alto contraste y capacidad de respuesta total con soporte para modo oscuro. Adecuado para formularios de inicio de sesión o registro.
Componente de autenticación
Un componente de autenticación responsivo diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises adecuado para sitios web comerciales / corporativos.
Componente de componentes de autenticación
Un componente de autenticación receptivo diseñado para la interfaz de usuario del modo oscuro, con un formulario de inicio de sesión y registro con el estilo CSS de Tailwind.