Connexion/Inscription

Composant de connexion/inscription

Composant complexe de connexion/inscription conçu avec un style skeuomorphe, utilisant un schéma de couleurs en niveaux de gris pour une interface de tableau de bord. Il comprend divers éléments interactifs et est réactif avec la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight" id="remember">
                    <label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
                </div>
                <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
            </div>
            <div class="flex flex-col">
                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
                <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
            <div class="flex justify-center space-x-4 mt-2">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
            </div>
        </div>
    </div>
</div>

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 l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 p-6">
  <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-lg p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Join Us</h2>
    <form>
      <div class="mb-4">
        <input type="text" placeholder="Username" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="email" placeholder="Email Address" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white rounded-md p-4 hover:bg-blue-600 shadow-xl transition duration-200">Sign Up</button>
    </form>
    <div class="text-center mt-4">
      <span class="text-gray-600 dark:text-gray-400">or</span>
    </div>
    <button class="w-full mt-4 bg-gray-200 rounded-md p-4 flex items-center justify-around hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 shadow-md transition duration-200">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google" class="w-6 h-6 rounded-full">
      <span class="text-gray-800 dark:text-gray-200">Continue with Google</span>
    </button>
    <div class="text-center mt-4">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log In</a></p>
    </div>
  </div>
</div>

MatérielEarthToneLoginSignupComponent

Un composant de connexion et d’inscription réactif de style Material Design avec une palette de couleurs terre, une complexité modérée avec un basculement interactif entre les formulaires, conçu pour les tableaux de bord avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Login / Signup Component</title>
    <script src='https://cdn.tailwindcss.com'></script>
  </head>
  <body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
    <div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
      <div class='hidden md:block'>
        <img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
      </div>
      <div class='p-8'>
        <input id='tabToggle' type='checkbox' class='peer sr-only' />
        <div class='flex justify-center mb-6 space-x-4'>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
        </div>
        <form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
          <div>
            <label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div>
            <label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
            <input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
        </form>
        <form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
              <input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
              <input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <div>
            <label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
              <input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
              <input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
        </form>
      </div>
    </div>
  </body>
</html>

Composant de connexion/inscription Brutalism

Un composant de connexion/inscription de style brutaliste avec une palette de couleurs triadique, une complexité moyenne, un design réactif et une prise en charge du mode sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-yellow-400 dark:bg-purple-800 p-4">
  <div class="bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-8 rounded-none shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center uppercase">Join Us</h2>
    
    <div class="mb-4">
      <label for="email" class="block text-sm font-bold mb-2">Email</label>
      <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="[email protected]">
    </div>
    
    <div class="mb-6">
      <label for="password" class="block text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="********">
    </div>
    
    <button class="w-full bg-red-600 dark:bg-red-400 text-white font-bold py-3 px-4 border-4 border-black dark:border-white uppercase">Login</button>
    
    <p class="text-center text-sm mt-4">Don't have an account? <a href="#" class="text-red-600 dark:text-red-400 font-bold">Sign up here</a>.</p>
    
    <div class="mt-8 text-center">
      <p class="text-lg font-bold mb-4">Or login with:</p>
      <div class="flex justify-center space-x-4">
        <button class="bg-blue-600 dark:bg-blue-400 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Facebook</button>
        <button class="bg-red-500 dark:bg-red-700 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Google</button>
      </div>
    </div>

  </div>
</div>

Composant de connexion/inscription

Un composant simple de connexion/inscription conçu pour le mode sombre avec une palette de couleurs pastel, adapté à un portfolio.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold mb-6 text-center">Welcome to My Portfolio</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input type="password" id="password" placeholder="your password" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <button type="submit" class="w-full py-2 bg-green-600 hover:bg-green-500 text-white rounded">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-sm">Don't have an account? <a href="#" class="text-green-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<div class="dark:bg-gray-900 dark:text-gray-200">
    <div class="dark:bg-gray-800 dark:border-gray-700">
        <input type="email" class="dark:bg-gray-700 dark:border-gray-600">
        <input type="password" class="dark:bg-gray-700 dark:border-gray-600">
    </div>
</div>

Composant de connexion/inscription

Un composant de connexion/inscription conçu dans le style Neumorphism avec une palette de couleurs pastel, adapté aux sites Web d’entreprise/d’entreprise, et prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Sign Up</button>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Create an Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
                <input type="text" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Sign Up</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Login</button>
        </div>
    </div>
</div>

Composant de connexion/inscription

Composant de connexion/inscription réactive avec mode sombre

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <div class="tabs mb-6">
      <button class="w-1/2 py-2 text-lg font-semibold text-center text-white border-b-2 border-pink-500">Login</button>
      <button class="w-1/2 py-2 text-lg font-semibold text-center text-gray-400 hover:text-white">Sign Up</button>
    </div>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-white bg-gray-700 focus:outline-none focus:ring-pink-500 focus:border-pink-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-white bg-gray-700 focus:outline-none focus:ring-pink-500 focus:border-pink-500" placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
          Login
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-pink-500 hover:text-pink-600" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

Composant de connexion/inscription

Formulaire de connexion/inscription 3D monochromatique

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md px-8 py-10 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 lg:w-1/3">
    <div class="absolute inset-0 w-full h-full transform scale-95 translate-x-1 translate-y-1 bg-gray-200 dark:bg-gray-700 rounded-lg blur-md"></div>
    <div class="relative">
      <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white">Login/Signup</h2>
      <div class="mt-6">
        <div class="relative mt-4">
          <input type="text" id="email" name="email" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Email Address">
        </div>
        <div class="relative mt-4">
          <input type="password" id="password" name="password" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Password">
        </div>
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center">
            <input type="checkbox" id="remember_me" name="remember_me" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember_me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
          </div>
        </div>
        <div class="mt-6">
          <button type="submit" class="w-full px-4 py-3 text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">Sign in</button>
        </div>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

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 l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Sign in to continue or create a new account.</p>
        <div class="space-y-4">
            <form>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                    <input type="email" id="email" class="input-class" placeholder="[email protected]" required />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                    <input type="password" id="password" class="input-class" placeholder="********" required />
                </div>
                <div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">Login</button>
                </div>
                <div class="text-center text-gray-600 dark:text-gray-400">
                    <p>Or</p>
                </div>
                <div>
                    <button type="button" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-400">Sign Up</button>
                </div>
            </form>
            <div class="flex items-center justify-center space-x-4">
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Google" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Facebook" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Twitter" class="rounded-full" />
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .input-class {
        display: block;
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: border-color 0.2s;
        color: #4b5563;
    }
    .input-class:focus {
        outline: none;
        border-color: #3b82f6;
    }
</style>

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 l’aperçu

                <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="[email protected]" 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="[email protected]" 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>

Catégories