Rechercher des composants

Catégories

Composants Formulaire de connexion

Formulaire de connexion

Formulaire d’authentification de l’utilisateur

Formulaire de connexion Neumorphism

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

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen"> <div class="w-full max-w-md p-8 m-4 bg-gray-200 rounded-xl shadow-2xl dark:bg-gray-800 dark:text-white"> <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h2> <form class="mt-8 space-y-6"> <div> <label for="email" class="sr-only">Email address</label> <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="Email address"> </div> <div> <label for="password" class="sr-only">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="Password"> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800"> <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-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-500"> Forgot your password? </a> </div> </div> <div> <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800"> <span class="absolute inset-y-0 left-0 flex items-center pl-3"> <svg class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-400 dark:group-hover:text-indigo-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2h2V7A3 3 0 008 7v2h2V7a3 3 0 013 0z" clip-rule="evenodd" /> </svg> </span> Sign in </button> </div> </form> </div></div>

Formulaire de connexion Skeuomorphic

Un simple formulaire de connexion Skeuomorphic avec des couleurs triadiques à des fins de tableau de bord, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 dark:bg-gray-900 bg-gray-100">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your username">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-light dark:shadow-neumorphic-dark dark:bg-blue-700 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
/* Basic neumorphic effect styles */
/* Light mode shadows */
.shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #1c2027, -8px -8px 15px #2e3643;
}

.dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1c2027, inset -5px -5px 10px #2e3643;
}

/* Triadic color examples (adjust as needed) */
/* Using shades of blue, yellow/orange, and red/pink for a triadic feel */
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }

.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .hover\:text-blue-500:hover { color: #3b82f6; }

/* Add subtle background colors for light/dark mode that aren't pure white/black to enhance neumorphism */
.bg-gray-100 { background-color: #f0f2f5; }
.dark .bg-gray-900 { background-color: #272c35; }
.bg-gray-200 { background-color: #e5e7eb; }
.dark .bg-gray-700 { background-color: #374151; }
.bg-white { background-color: #ffffff; }
.dark .bg-gray-800 { background-color: #1f2937; }

.text-gray-700 { color: #374151; }
.dark .text-gray-300 { color: #d1d5db; }
.text-gray-800 { color: #1f2937; }
.dark .text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }

</style>

Composant du formulaire de connexion

Un composant de formulaire de connexion réactif stylisé avec glassmorphism, avec des éléments translucides avec des effets de flou et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
                </div>
                <a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
    </div>
</div>

Composant du formulaire de connexion

Composant de formulaire de connexion avec conception 3D, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                ```html
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-lg w-96 transform transition duration-500 hover:scale-105">
    <h2 tabindex="0" class="text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Login
      </button>
    </form>
    <div class="mt-6 text-center">
      <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot Password?</a>
    </div>
  </div>
</div>
```

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.

Ouvrir Aperçu

                <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>

Composant du formulaire de connexion

Un composant de formulaire de connexion réactif conçu avec le style Glassmorphism, incorporant des effets de verre givré, des effets de flou et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

Composant du formulaire de connexion

Un composant de formulaire de connexion conçu avec Glassmorphism, avec des éléments translucides semblables à du verre dépoli et des effets réactifs, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-40 backdrop-blur-lg rounded-lg 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">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="username" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out">
                    <label class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot password?</a>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Login</button>
        </form>
        <p class="mt-6 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Sign up</a></p>
    </div>
</div>

Formulaire de connexion rétro

Un composant de formulaire de connexion de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
                <input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <a href="#" class="hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-4">
            <img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
            <span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
        </div>
    </div>
</div>

Formulaire de connexion Composante 37

Un composant de formulaire de connexion réactif conçu dans le style Material Design avec Tailwind CSS, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
            </div>
        </div>
    </div>
</div>