Registration Form Component
A responsive registration form component with a glassmorphism design, grayscale color scheme, and dark theme support, suitable for business/corporate websites.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full m-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Username</label>
<input type="text" id="username" name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" name="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 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200" href="#">
Already have an account?
</a>
</div>
</form>
</div>
</div>Related Components
Registration Form Component
A minimalist and responsive Registration Form Component designed with Tailwind CSS, supporting dark mode and featuring clean spaces with minimal elements.
Registration Form Component
A responsive registration form with Neumorphism design, analogous color scheme, and dark mode support, built with Tailwind CSS for social media purposes.
Skeuomorphism Registration Form Grayscale
A Skeuomorphic Registration Form Component in Grayscale for Portfolios, with Moderate complexity, Responsive design and Dark theme support, no Javascript. Images from picsum.photos and randomuser.me used.