Componentes Formas Componente de formas neumórficas

Componente de formas neumórficas

Un componente de formularios simple con diseño de neumorfismo, adaptado para aplicaciones de comercio electrónico, con un esquema de color monocromático y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Neumorphic Forms Component</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-8 w-4/5 max-w-md">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="name" type="text" placeholder="John Doe">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="password" type="password" placeholder="••••••••">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <p>Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Log In</a></p>
        </div>
    </div>
</body>
</html>

Componentes relacionados

Componente de formularios

Un componente de formulario complejo y responsivo con soporte de tema oscuro para sitios web de blogs/contenido, diseñado en un estilo minimalista/plano utilizando un esquema de color análogo.

Abrir

Componente de formularios

Componente de formularios receptivo con diseño 3D, combinación de colores análoga, diseño simple para comercio electrónico con soporte de tema oscuro

Abrir

Componente Formularios de diseño de materiales

Un componente de formularios responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para el modo oscuro.

Abrir