Composants Connexion/Inscription Composant de connexion/inscription 12

Composant de connexion/inscription 12

Un composant de connexion/inscription réactif conçu dans le style du mode sombre, utilisant Tailwind CSS pour le style.

Aperçu

HTML Code

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>

Composants associés

Composant de connexion/inscription

Un composant complexe de connexion/inscription utilisant les principes de Material Design et une palette de couleurs monochromatique pour les sites Web d’entreprise et d’entreprise avec prise en charge du thème sombre.

Ouvrir

Composant de connexion/inscription

Un composant de connexion/inscription réactif conçu dans le style Material Design avec prise en charge du thème sombre et palette de couleurs complémentaire, adapté aux interfaces de médias sociaux.

Ouvrir

Composant de connexion/inscription

Un formulaire de connexion/inscription simple et réactif conçu pour les entreprises manufacturières/industrielles, avec une palette monochrome avec une couleur d’accentuation vive, des transitions dégradées et la prise en charge du mode sombre.

Ouvrir