Composants Connexion/Inscription Composant de connexion/inscription

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.

Aperçu

HTML Code

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
        <div class="flex flex-col space-y-4">
            <!-- Login Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
                    <input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="you@example.com" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
                    <input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
            </form>
            <!-- Separator -->
            <div class="flex items-center justify-center space-x-2">
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
                <span class="text-gray-500 dark:text-gray-400">OR</span>
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <!-- Signup Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
                    <input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
                    <input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="you@example.com" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
                    <input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
            </form>
            <!-- Avatar Image -->
            <div class="flex justify-center mt-6">
                <img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500"> 
            </div>
        </div>
    </div>
</div>

Composants associés

LoginSignupComponent

Un composant de connexion/inscription réactif conçu avec le style Neumorphism et la palette de couleurs pastel pour les interfaces de médias sociaux.

Ouvrir

Connexion / inscription au tableau de bord rétro

Un composant de connexion et d’inscription sur le thème rétro/vintage pour un tableau de bord, avec une mise en page complexe et une palette de couleurs triadique. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

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.

Ouvrir