Authentication Components Component
A responsive authentication component designed for dark mode UI, featuring a login and signup form with Tailwind CSS styling.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
<h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
</div>
<div class="mt-6 border-t border-gray-600"></div>
<h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
<input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
<input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
</div>
<div class="mb-4">
<label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
</div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
</form>
<div class="mt-4 text-center">
<small>Or sign up using</small>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
<img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
</div>
</div>
</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.
Skeuomorphism Authentication Component
Skeuomorphism Authentication Component with Analogous color scheme and complex layout for Blog/Content purposes, responsive and dark theme support.