Registration Form Component
A minimalist registration form with a grayscale color scheme and rich interactive elements, responsive and includes dark mode support using Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
<div class="flex items-center justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
</div>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input class="mr-2 leading-tight" type="checkbox" required>
<span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
</label>
</div>
<div class="flex items-center justify-center">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</div>
</form>
</div>Related Components
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.
Skeuomorphic Registration Form
Skeuomorphic registration form with monochromatic color scheme, designed for business/corporate use with dark mode support and responsiveness using Tailwind CSS. No JavaScript.