Registration Form Component
A simple registration form with a 3D pastel design, responsive and with dark mode support. Suitable for a blog or content consumption website.
HTML Code
<div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
</div>
<div class="flex items-center justify-between">
<button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
Register
</button>
</div>
</form>
</div>
</div>Related Components
Registration Form Component
A responsive registration form component styled with Glassmorphism, featuring frosted glass-like translucent elements with blur effects, supporting dark mode and displaying placeholder images.
Registration Form Component
Registration Form Component with Dark Mode, Vibrant colors, and Moderate complexity for Blog/Content purpose.
Registration Form Component
A minimalist and responsive Registration Form Component designed with Tailwind CSS, supporting dark mode and featuring clean spaces with minimal elements.