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.
HTML Code
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm p-8 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
<form>
<div class="mb-5">
<label for="username" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
<input type="text" id="username" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your username">
</div>
<div class="mb-5">
<label for="email" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your password">
</div>
<button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 shadow-neumorphism-light dark:shadow-neumorphism-dark">Register</button>
</form>
<div class="mt-6 text-center text-gray-700 dark:text-gray-300">
Already have an account? <a href="#" class="font-medium text-blue-500 hover:underline">Login</a>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
.shadow-inner-neumorphism-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphism-dark {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
}
</style>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 minimalist registration form with a grayscale color scheme and rich interactive elements, responsive and includes dark mode support using Tailwind CSS.
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.