Componente de formularios
Un componente de formulario complejo de Material Design con un esquema de color triádico para un tablero. Es sensible y admite el modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Settings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label for="username" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Username</label>
<input type="text" id="username" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="john.doe">
</div>
<div>
<label for="email" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
</div>
<div>
<label for="password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
</div>
<div>
<label for="confirm-password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Confirm Password</label>
<input type="password" id="confirm-password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
</div>
<div class="md:col-span-2">
<label for="bio" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Bio</label>
<textarea id="bio" rows="4" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="Tell us about yourself..."></textarea>
</div>
<div class="md:col-span-2">
<label class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Notification Settings</label>
<div class="flex items-center mb-4">
<input type="checkbox" id="email-notifications" class="mr-2">
<label for="email-notifications" class="text-gray-700 dark:text-gray-200">Receive email notifications</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="push-notifications" class="mr-2">
<label for="push-notifications" class="text-gray-700 dark:text-gray-200">Receive push notifications</label>
</div>
</div>
</div>
<div class="flex justify-end mt-8">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-4">Cancel</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Save Settings</button>
</div>
</div>
</div>Componentes relacionados
Formulario de cuidado de la salud orgánico/inspirado en la naturaleza
Un componente de formulario simple y receptivo con un diseño natural y fluido, esquema de color azul corporativo y compatibilidad con modo oscuro, adecuado para aplicaciones médicas y de atención médica.
JobApplicationForm_WatercolorArtistic
Un formulario de solicitud de empleo complejo y receptivo con un estilo de diseño artístico / acuarela y un esquema de colores de arco iris degradado. Incluye secciones para datos personales, experiencia, educación y carga de archivos, con soporte para modo oscuro, adecuado para bolsas de trabajo y plataformas profesionales.
3D_Education_Form_Component
Un componente de formulario responsivo inspirado en 3D de alto contraste para plataformas educativas, compatible con el modo oscuro.