Social Login Component
A minimalist flat design social login component featuring responsive effects and dark theme support.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
<h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
<div class="mt-4 flex justify-around w-full">
<button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
</div>
<div class="mt-4 text-center">
<span class="text-gray-500 dark:text-gray-400">or</span>
</div>
<input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Log In
</button>
<p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
</p>
</div>
</div>Related Components
Social Login Component - Microinteractions
A social login component card using Tailwind CSS, featuring microinteractions on buttons (scale effect on hover/focus), responsiveness (centered max-width), and dark theme support. Uses a placeholder image from picsum.photos and embedded SVGs for social icons. No JavaScript.
Social Login Component - Neumorphism Vibrant Complex
A complex, responsive social login form component styled with Neumorphism and vibrant accents using Tailwind CSS, supporting dark mode.
Material Design Social Login Component
Material Design Social Login Component with Complementary color scheme, moderate complexity, for Blog/Content purpose, responsive with dark mode support using Tailwind CSS.