Neumorphic_Fashion_Form
Un componente de forma neumórfica complejo, sensible y con un esquema de color apagado/desaturado, diseñado para marcas de moda y belleza, con múltiples elementos interactivos y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Forma brutalista de redes sociales
Un componente de formulario simple y brutalista para redes sociales con combinación de colores triádica y soporte para temas oscuros.
Componente de formularios
Un componente de formulario complejo y receptivo con fondos degradados multicolores y transiciones suaves, adecuado para aplicaciones de tecnología/SaaS. Incluye soporte para modo oscuro y elementos interactivos.
3D_Education_Form_Component
Un componente de formulario responsivo inspirado en 3D de alto contraste para plataformas educativas, compatible con el modo oscuro.