Composants Formulaire de connexion Formulaire de connexion Neumorphism

Formulaire de connexion Neumorphism

Un composant de formulaire de connexion conçu avec le style Neumorphism, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

Composants associés

Formulaire de connexion minimaliste

Un formulaire de connexion minimaliste pour les sites e-commerce, avec prise en charge du responsive design et du mode sombre. Utilise un schéma de couleurs analogue. Pas de JavaScript.

Ouvrir

Composant du formulaire de connexion

Un composant de formulaire de connexion minimaliste conçu avec une palette de couleurs triadique adaptée à la présentation de portfolios avec prise en charge du mode sombre.

Ouvrir

Composant du formulaire de connexion

Formulaire de connexion réactif avec conception matérielle, schéma de couleurs triadique et prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir