Escala de grises neumórfica Social Login
Un componente de inicio de sesión social receptivo con un estilo de diseño de neumorfismo en escala de grises. Incluye botones para proveedores de redes sociales, un separador y enlaces para registrarse/olvidar la contraseña. Admite el modo oscuro usando el prefijo dark: de Tailwind. Diseñado para entornos de panel de control.
Código HTML
<div class="max-w-sm mx-auto p-6 rounded-xl bg-gray-200 dark:bg-gray-800 shadow-[8px_8px_16px_#bebebe,-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#303030,-8px_-8px_16px_#505050]">
<h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-300 mb-6">Social Login</h2>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
<!-- Using simple text/icons for demonstration -->
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M7 10v4h3v7h4v-7h3l1-4h-4V8c0-1 0-2 2-2h3V3H7a5 5 0 00-5 5v2z"></path>
</svg>
Login with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
<!-- Using simple text/icons for demonstration -->
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 01-5.279-5.28c0-2.917 2.357-5.274 5.279-5.274a5.024 5.024 0 013.031 1.048l3.18-3.179A9.922 9.922 0 0012.004 2c-5.404 0-9.792 4.388-9.792 9.792s4.388 9.792 9.792 9.792c5.404 0 9.328-3.918 9.328-9.792 0-.79-.137-1.56-.395-2.29z"></path>
</svg>
Login with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
<!-- Using simple text/icons for demonstration -->
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.82.38-1.71.64-2.65.76.95-.56 1.68-1.46 2.02-2.55-.94.56-1.98.96-3.09 1.18A5.112 5.112 0 0017.34 4c-3.37 0-6.1 2.73-6.1 6.1 0 .48.05.95.14 1.4a17.36 17.36 0 01-12.6-6.35 6.14 6.14 0 001.89 8.11 6.19 6.19 0 01-2.76-.76v.08c0 2.96 2.11 5.43 4.9 6-.52.14-1.07.21-1.64.21-.4 0-.79-.04-1.17-.11.78 2.43 3.04 4.19 5.74 4.24a12.95 12.95 0 01-8.06 2.75c-.53 0-1.06-.03-1.58-.09 10.94 6.96 23.17 3.59 27.65-7.13v-.5c.95-.69 1.77-1.57 2.42-2.58z"></path>
</svg>
Login with Twitter
</button>
</div>
<div class="flex items-center my-6">
<div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
<span class="px-3 text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 text-sm">or</span>
<div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
</div>
<p class="text-center text-gray-600 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="font-semibold hover:underline">Sign Up</a></p>
<p class="text-center text-gray-600 dark:text-gray-400 text-xs mt-2"><a href="#" class="hover:underline">Forgot Password?</a></p>
</div>Componentes relacionados
Componente de inicio de sesión social Art Deco
Un complejo componente de inicio de sesión social diseñado con una estética Art Deco para CRM/Business Tools, con patrones geométricos, neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.
Componente de inicio de sesión social Art Deco
Un complejo componente de inicio de sesión social inspirado en el Art Deco con una combinación de colores dulces/dulces, diseñado para tableros, totalmente receptivo con soporte para modo oscuro.
Componente de inicio de sesión social
Componente de inicio de sesión social limpio e inspirado en código con una fuente monoespaciada, esquema de color neutro cálido, adecuado para sitios web gubernamentales / de servicio público. Incluye diseño responsivo y soporte para modo oscuro.