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
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.
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.