Registration Form Component
A responsive registration form component designed with a skeuomorphic style, using a monochromatic color scheme and tailored for e-commerce experiences. It supports dark mode and includes interactive input features for user registration.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg p-8 w-full max-w-lg">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6 text-center">Create Your Account</h2>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-24 h-24 border-2 border-gray-500 dark:border-gray-600 shadow-lg">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your username" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your password" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
<span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
</label>
</div>
<button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-300 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-gray-800 dark:text-gray-200 font-medium">Login</a>
</p>
</div>
</div>Related Components
registration-form-ecommerce-tailwind
Minimalist flat design registration form component for e-commerce using Tailwind CSS with responsive and dark mode support, featuring a complementary blue-orange color scheme.
Registration Form Component
A responsive registration form component with a glassmorphism style, earth tone color scheme, and dark theme support. Designed for social media platforms, with a simple layout and minimal elements. Uses Tailwind CSS for styling and includes example image placeholders.
Brutalism Registration Form
Registration Form Component with Brutalism design, Triadic color scheme, and simple complexity, suitable for a dashboard. It is responsive and supports dark mode using Tailwind CSS.