MinimalistAuthForm
A responsive, minimalist login form component designed for portfolios or web applications. It features a flat design aesthetic with a complementary color scheme: blue is used for interactive elements in light mode, and orange is used in dark mode. The form includes fields for email and password, a 'remember me' option, a 'forgot password' link, an option to sign up, and social login integration (e.g., GitHub). It supports dark theme and is built purely with HTML and Tailwind CSS for easy integration.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
<div class="text-center mb-6 sm:mb-8">
<!-- Optional: Logo (example using picsum.photos) -->
<!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
Sign In
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Welcome back! Please enter your details.
</p>
</div>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
<input type="email" name="email" id="email" autocomplete="email" required
class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
</div>
<div>
<div class="flex items-center justify-between mb-1">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
Forgot password?
</a>
</div>
</div>
<input type="password" name="password" id="password" autocomplete="current-password" required
class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
</div>
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg 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-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
Not a member?
<a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
Create an account
</a>
</p>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
Sign in with GitHub
</a>
</div>
<!-- Example for Google Icon (you would need the SVG) -->
<!--
<div>
<a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
Sign in with Google
</a>
</div>
-->
</div>
</div>
</div>
</div>Related Components
AuthComponent
A skeuomorphic authentication component designed with Tailwind CSS featuring responsive effects and dark theme support.
Authentication Components Component
A Neumorphic designed authentication component for e-commerce with vibrant colors, dark theme support, and responsive design.
Authentication_Components_Component
A simple and responsive authentication component for social media with microinteractions, complementary color scheme, and dark theme support using Tailwind CSS.