Componente de inicio de sesión social
Un componente de inicio de sesión social simple con un diseño Skeuomórfico, tonos tierra y un diseño receptivo con soporte para modo oscuro. Este componente es adecuado para blogs o sitios web de consumo de contenido, ya que ofrece una experiencia de inicio de sesión visualmente atractiva y fácil de usar.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
<h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
<div class="space-y-4">
<button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
</button>
<button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
</button>
<button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
</button>
</div>
<p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
</p>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado con Tailwind CSS, con espacios limpios y efectos responsivos para temas claros y oscuros.
Componente de inicio de sesión social
Un componente de inicio de sesión social complejo y receptivo diseñado para paneles. Utiliza una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Cuenta con botones de proveedor de redes sociales, un formulario de correo electrónico / contraseña, un interruptor "Recuérdame" y un separador con opciones de inicio de sesión alternativas. Totalmente responsivo con ilustración de imagen y utiliza Tailwind CSS con prefijo dark: para soporte de tema oscuro. No se necesita JavaScript.
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.