Registration Form Component
A responsive registration form component with a neumorphism design style and neon/electric color scheme, supporting dark mode. Designed for consulting/services.
HTML Code
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
<div class="w-full max-w-md mx-auto p-6 sm:p-8 md:p-10 rounded-3xl
bg-gradient-to-br from-gray-100 to-gray-200
dark:from-gray-800 dark:to-gray-900
shadow-neumorphism-light dark:shadow-neumorphism-dark
border border-solid border-transparent dark:border-gray-700
transition-all duration-500 ease-in-out
relative overflow-hidden
before:content-[''] before:absolute before:inset-0
before:rounded-3xl before:opacity-5 before:z-0
before:bg-gradient-to-br before:from-blue-500 before:via-purple-500 before:to-pink-500
dark:before:from-blue-700 dark:before:via-purple-700 dark:before:to-pink-700
before:blur-lg before:pointer-events-none
">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10
bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
drop-shadow-lg
relative z-10
">
Register for Services
</h2>
<form class="space-y-4 sm:space-y-6 relative z-10">
<div>
<label for="full-name" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Full Name
</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:focus:ring-blue-400
transition-all duration-300 ease-in-out
peer
group
"
required>
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Email Address
</label>
<input type="email" id="email" name="email" placeholder="[email protected]"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
dark:focus:ring-purple-400
transition-all duration-300 ease-in-out
"
required>
</div>
<div>
<label for="phone" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-pink-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Phone Number (Optional)
</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75
dark:focus:ring-pink-400
transition-all duration-300 ease-in-out
">
</div>
<div>
<label for="service" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Interested Service
</label>
<select id="service" name="service"
class="w-full p-3 rounded-xl appearance-none
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:focus:ring-blue-400
transition-all duration-300 ease-in-out
cursor-pointer
">
<option value="" disabled selected class="text-gray-400 dark:text-gray-500">Select a service</option>
<option value="strategy" class="bg-gray-50 dark:bg-gray-800">Business Strategy</option>
<option value="marketing" class="bg-gray-50 dark:bg-gray-800">Digital Marketing</option>
<option value="tech" class="bg-gray-50 dark:bg-gray-800">Technology Consulting</option>
<option value="hr" class="bg-gray-50 dark:bg-gray-800">HR & Talent Management</option>
<option value="finance" class="bg-gray-50 dark:bg-gray-800">Financial Advisory</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Your Message (Optional)
</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..."
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
dark:focus:ring-purple-400
transition-all duration-300 ease-in-out
resize-y
"></textarea>
</div>
<button type="submit"
class="w-full py-3 px-6 rounded-full font-bold text-lg
text-white
bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
shadow-neumorphism-button dark:shadow-neumorphism-button-dark
hover:shadow-neumorphism-button-hover dark:hover:shadow-neumorphism-button-hover-dark
focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-300 dark:focus:ring-blue-700
focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105
active:translate-y-0 active:scale-100 active:shadow-neumorphism-button-active dark:active:shadow-neumorphism-button-active-dark
relative group
overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-white before:to-transparent before:opacity-0 before:scale-0 before:transition-transform before:duration-500 before:ease-out
hover:before:scale-125 hover:before:opacity-20
">
<span class="relative z-10">Submit Registration</span>
</button>
<p class="text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-4">
By registering, you agree to our <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-300">Terms of Service</a> and <a href="#" class="text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-500 transition-colors duration-300">Privacy Policy</a>.
</p>
</form>
</div>
</div>
<style>
/* Base Neu-shadows - Customize these values */
.shadow-neumorphism-light {
box-shadow: 8px 8px 16px #cdd4df, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 8px 8px 16px #22252a, -8px -8px 16px #3e4249;
}
/* Inset Neu-shadows */
.shadow-neumorphism-inset-light {
box-shadow: inset 5px 5px 10px #cad1db, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-inset-dark {
box-shadow: inset 5px 5px 10px #22252a, inset -5px -5px 10px #444951;
}
/* Button Neu-shadows */
.shadow-neumorphism-button {
box-shadow: 6px 6px 12px #9ba4ae, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphism-button-dark {
box-shadow: 6px 6px 12px #181a1e, -6px -6px 12px #444951;
}
.shadow-neumorphism-button-hover {
box-shadow: 8px 8px 16px #9ba4ae, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphism-button-hover-dark {
box-shadow: 8px 8px 16px #181a1e, -8px -8px 16px #444951;
}
.shadow-neumorphism-button-active {
box-shadow: inset 5px 5px 10px #9da6b0, inset -5px -5px 10px #e0e6ec;
}
.dark .shadow-neumorphism-button-active-dark {
box-shadow: inset 5px 5px 10px #1c1f24, inset -5px -5px 10px #3a3d43;
}
/* Custom styles for select arrow */
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.5em 1.5em;
padding-right: 2.5rem; /* Make space for the arrow */
}
.dark select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); /* Dark mode arrow color */
filter: invert(1);
}
</style>Related Components
Registration Form Component
A responsive registration form component with a 3D design aesthetic, incorporating sepia/brown tones, suitable for social media applications. It supports dark mode and utilizes semantic HTML for accessibility.
Neumorphism Registration Form
Neumorphism Registration Form Component with dark theme support using Tailwind CSS
Registration Form Component
A responsive registration form component designed in a Brutalist style with a pastel color scheme and suitable for business/corporate websites. It features dark mode support using Tailwind CSS.