Neumorphic_Fashion_Form
A complex, responsive, neumorphic form component with a muted/desaturated color scheme, designed for fashion and beauty brands, featuring multiple interactive elements and dark mode support.
HTML Code
<div class="min-h-screen bg-gray-200 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-800 transition-colors duration-300">
<div class="w-full max-w-4xl bg-gray-200 rounded-3xl shadow-neumorphic-light-xl p-6 sm:p-10 md:p-12 transition-all duration-300 dark:bg-gray-800 dark:shadow-neumorphic-dark-xl">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-700 mb-8 text-center dark:text-gray-200">
Elevate Your Style Profile
</h2>
<form action="#" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
<!-- Personal Information Section -->
<div class="col-span-full mb-4">
<h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Personal Details</h3>
</div>
<!-- First Name -->
<div>
<label for="first-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="Jane" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
</div>
<!-- Last Name -->
<div>
<label for="last-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
</div>
<!-- Email Address -->
<div class="md:col-span-2">
<label for="email" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
</div>
<!-- Styling Preferences Section -->
<div class="col-span-full mt-6 mb-4">
<h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Styling Preferences</h3>
</div>
<!-- Style Category Multi-select -->
<div class="md:col-span-2">
<label for="style-category" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Style Categories</label>
<div class="relative">
<select multiple id="style-category" name="style-category[]" class="w-full p-3 pr-10 appearance-none bg-gray-200 rounded-xl shadow-neumorphic-inset-light focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200 h-32 sm:h-auto min-h-[100px] sm:min-h-0">
<option value="casual">Casual Chic</option>
<option value="boho">Bohemian Rhapsody</option>
<option value="minimalist">Minimalist Elegance</option>
<option value="glam">Glamour & Evening</option>
<option value="sporty">Sporty Luxe</option>
<option value="vintage">Vintage Charm</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 dark:text-gray-400">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
</div>
</div>
<p class="text-xs text-gray-400 mt-2 dark:text-gray-500">Hold Ctrl/Cmd to select multiple options.</p>
</div>
<!-- Body Type Radios -->
<div>
<label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Body Type</label>
<div class="space-y-3">
<div class="flex items-center">
<input type="radio" id="hourglass" name="body-type" value="hourglass" class="hidden peer">
<label for="hourglass" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
Hourglass
</label>
</div>
<div class="flex items-center">
<input type="radio" id="rectangle" name="body-type" value="rectangle" class="hidden peer">
<label for="rectangle" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
Rectangle
</label>
</div>
<div class="flex items-center">
<input type="radio" id="pear" name="body-type" value="pear" class="hidden peer">
<label for="pear" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
Pear
</label>
</div>
</div>
</div>
<!-- Preferred Colors Checkbox Group -->
<div>
<label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Color Palette</label>
<div class="grid grid-cols-2 gap-3">
<div class="flex items-center select-none">
<input type="checkbox" id="neutral" name="colors[]" value="neutral" class="hidden peer">
<label for="neutral" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
<span class="relative z-10">Neutrals</span>
</label>
</div>
<div class="flex items-center select-none">
<input type="checkbox" id="pastels" name="colors[]" value="pastels" class="hidden peer">
<label for="pastels" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
<span class="relative z-10">Pastels</span>
</label>
</div>
<div class="flex items-center select-none">
<input type="checkbox" id="bold" name="colors[]" value="bold" class="hidden peer">
<label for="bold" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
<span class="relative z-10">Bold Hues</span>
</label>
</div>
<div class="flex items-center select-none">
<input type="checkbox" id="earth" name="colors[]" value="earth" class="hidden peer">
<label for="earth" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
<span class="relative z-10">Earth Tones</span>
</label>
</div>
</div>
</div>
<!-- Upload Inspiration Images -->
<div class="md:col-span-2 mt-6">
<label for="inspiration-upload" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Upload your style inspiration (optional)</label>
<div class="flex justify-center items-center h-48 sm:h-56 border-2 border-dashed border-gray-300 rounded-xl shadow-neumorphic-inset-light p-4 dark:border-gray-600 dark:shadow-neumorphic-inset-dark">
<div class="text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8c0 4.418-4.477 8-10 8H12M28 8a4 4 0 00-4-4H12a4 4 0 00-4 4m20 0v12m4-8h-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
<label for="inspiration-upload" class="relative cursor-pointer font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
<span>Upload a file</span>
<input id="inspiration-upload" name="inspiration-upload" type="file" class="sr-only">
</label>
or drag and drop
</p>
<p class="text-xs text-gray-500 dark:text-gray-500">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<!-- Newsletter Opt-in Toggle -->
<div class="col-span-full mt-6">
<div class="flex items-center justify-between py-3 px-4 rounded-xl shadow-neumorphic-light text-gray-700 dark:bg-gray-800 dark:shadow-neumorphic-dark transition-all duration-200">
<span class="text-base font-medium dark:text-gray-200">Receive personalized fashion tips</span>
<label for="newsletter-toggle" class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="newsletter-toggle" name="newsletter-optin" value="true" class="sr-only peer">
<div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 dark:bg-gray-600 transition-all duration-200">
</div>
</label>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-700 flex justify-center">
<button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-full text-lg font-semibold text-white bg-indigo-500 shadow-neumorphic-button-light hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 focus:ring-indigo-500 dark:bg-indigo-700 dark:shadow-neumorphic-button-dark dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800 dark:focus:ring-indigo-700 transition-all duration-200">
Update Profile
</button>
</div>
</form>
</div>
</div>
<style>
/* Custom Tailwind CSS Shadow Utilities for Neumorphism */
/* Light Mode Shadows */
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.shadow-neumorphic-light-xl {
box-shadow: 10px 10px 20px #a3a3a3, -10px -10px 20px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-active-light {
box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
}
.shadow-neumorphic-button-light {
box-shadow: 6px 6px 12px rgba(99, 102, 241, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.7);
}
/* Dark Mode Shadows */
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #262626;
}
.dark .shadow-neumorphic-dark-xl {
box-shadow: 10px 10px 20px #3d3d3d, -10px -10px 20px #2f2f2f;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #262626;
}
.dark .shadow-neumorphic-active-dark {
box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #262626;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 6px 6px 12px rgba(67, 56, 202, 0.5), -6px -6px 12px rgba(118, 97, 246, 0.4);
}
/* Custom styling for multiselect to hide default arrow on some browsers */
select[multiple]::-ms-expand {
display: none;
}
select[multiple] {
-webkit-appearance: none; /* For WebKit browsers */
-moz-appearance: none; /* For Gecko browsers */
appearance: none; /* Standard property */
}
</style>Related Components
Forms Component
Forms Component with Glassmorphism style, Vibrant color scheme, and Simple complexity for Portfolio. Responsive design with dark theme support using Tailwind CSS. No JavaScript.
Minimalist Forms Component
A minimalist form component tailored for portfolios, featuring a pastel color scheme, simple layout, responsive design, and dark mode support using Tailwind CSS.
Brutalist Social Media Form
A simple, brutalist form component for social media with triadic color scheme and dark theme support.