Authentication Components Component
Authentication Component with dark mode, responsive effects, and no JavaScript dependency.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 p-10 rounded-lg shadow-xl w-full max-w-md">
<h1 class="text-white text-center text-2xl font-bold mb-6">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
<input type="email" id="email" class="shadow appearance-nonse border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign In</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-700" href="#">Forgot Password?</a>
</div>
</form>
</div>
</div>Related Components
Authentication Components
A complex, responsive Authentication component styled in a brutalism design with a dark theme, suitable for social media applications.
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.
Authentication Components Component
A responsive dark mode authentication component for dashboards, utilizing earth tones for a natural aesthetic.