Minimalist E-commerce Login Form
A minimalist and flat design login form with pastel colors, designed for e-commerce sites. It is simple, responsive, and supports dark mode using Tailwind CSS.
HTML Code
<div
class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
>
<div
class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
>
<h2
class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
>
Login
</h2>
<form>
<div class="mb-4">
<label
for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Email Address
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your email"
/>
</div>
<div class="mb-6">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
>
Login
</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
</p>
</div>
</div>
</div>
Related Components
Login Form Component
A clean, code-inspired login form component with monospace fonts and cool neutral colors, suitable for marketplace platforms. Includes full responsiveness and dark mode support.
Login Form Component
Login Form Component with 3D design, responsive effects, and dark theme support using Tailwind CSS.
Login Form Component
A Login Form Component designed with Glassmorphism, featuring frosted glass-like translucent elements and responsive effects, supporting dark themes using Tailwind CSS.