Componente de formularios 3D
Un componente de formularios simple y receptivo con elementos de diseño 3D y colores pastel para interfaces de redes sociales, compatible con el modo oscuro.
Código HTML
<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
<input type="file" id="avatar" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline">
</div>
<div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
</div>
</form>
<div class="mt-4">
<img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
</div>
</div>Componentes relacionados
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.
Componente de formularios minimalistas
Un componente de formulario minimalista diseñado para carteras, con una combinación de colores pastel, un diseño sencillo, un diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de formularios
Un componente de formularios complejo, receptivo y habilitado para temas oscuros para interfaces de redes sociales con un diseño monocromático en 3D. Utiliza Tailwind CSS con prefijos dark: para el modo oscuro e incluye elementos de formulario de ejemplo.