Componente de botones OAuth (modo oscuro, monocromático)
Componente de botones OAuth responsivo con soporte de modo oscuro mediante Tailwind CSS. Utiliza un esquema de color monocromático con fondos oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 p-4">
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-100 mb-6">Login or Sign Up</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.165 6.839 9.489.5.092.682-.216.682-.48v-1.693c-2.791.611-3.365-1.34-3.365-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.618.069-.606.069-.606 1.003.07 1.531 1.032 1.531 1.032.892 1.526 2.341 1.082 2.91.829.091-.642.357-1.082.654-1.333-2.22-.253-4.555-1.11-4.555-4.949 0-1.092.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.025A9.776 9.776 0 0110 4.388c.85.006 1.7.103 2.504.304 1.909-1.293 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65a3.736 3.736 0 011.029 2.682c0 3.84-2.335 4.69-4.565 4.943.37.316.68.921.68 1.852v2.755c0 .268.18.579.688.488C17.137 18.165 20 14.418 20 10A10 10 0 0010 0z" clip-rule="evenodd"></path>
</svg>
Continue with GitHub
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.625c0-2.515 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.453h-1.267c-1.243 0-1.63.771-1.63 1.562V10h2.77l-.443 2.894h-2.327V20A10 10 0 0020 10z"></path>
</svg>
Continue with Facebook
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M19.243 9.243a9.93 9.93 0 00-.02-1.483c-.1-.52-.253-1.026-.458-1.518l-.105-.238a9.964 9.964 0 00-1.014-1.428l-.16-.215-.142-.179A9.986 9.986 0 0010 .009a10 10 0 00-9.24 5.757 9.93 9.93 0 00-.02 1.483c-.1.52-.252 1.027-.457 1.518l-.105.238a9.964 9.964 0 00-1.014 1.428l-.16.215-.142.179A9.986 9.986 0 000 10.009a10 10 0 009.24 5.757 9.93 9.93 0 00.02-1.483c.1-.52.253-1.026.458-1.518l.105-.238a9.964 9.964 0 001.014-1.428l.16-.215.142-.179A9.986 9.986 0 0020 10.009a10 10 0 00-9.24-5.766zM10 14a4 4 0 110-8 4 4 0 010 8z"></path>
</svg>
Continue with Google
</button>
</div>
</div>
</div>Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth responsivo con un estilo de diseño 3D, compatibilidad con temas oscuros e imágenes de marcador de posición. El componente cuenta con botones para Google, Facebook, Twitter y LinkedIn, con efectos de desplazamiento para mayor profundidad y participación.
Componente de botones OAuth
Un componente de botones OAuth receptivo con diseño de skeuomorfismo, combinación de colores análoga e interacciones complejas, adecuado para interfaces de redes sociales. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo, sin JavaScript. Imágenes extraídas de Lorem Picsum y RandomUser.me.
Componente de botones OAuth
Un componente web para botones de autenticación OAuth con estilo de neumorfismo, diseñado para una cartera, e incluye un diseño responsivo con soporte para temas oscuros.