Formulaire d’inscription

Formulaire d’inscription Skeuomorphic

Formulaire d’inscription skeuomorphe avec palette de couleurs monochromatiques, conçu pour une utilisation professionnelle/d’entreprise avec prise en charge du mode sombre et réactivité à l’aide de Tailwind CSS. Pas de JavaScript.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-10 rounded-lg shadow-xl w-full max-w-md border-t-8 border-gray-400 dark:border-gray-600 transform skew-y-2">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center transform -skew-y-2">Create Account</h2>
    <form class="transform -skew-y-2">
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="name">
          Full Name
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="name" type="text" placeholder="John Doe">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="email">
          Email Address
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="email" type="email" placeholder="[email protected]">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="password">
          Password
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="password" type="password" placeholder="********">
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform skew-y-2" for="confirm-password">
          Confirm Password
        </label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:border-gray-500 transform skew-y-2" id="confirm-password" type="password" placeholder="********">
      </div>
      <div class="flex items-center justify-between transform skew-y-2">
        <button class="bg-gray-600 dark:bg-gray-500 hover:bg-gray-700 dark:hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transform -skew-y-2" type="button">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 transform -skew-y-2" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

Composant du formulaire d’inscription

Un formulaire d’inscription minimaliste avec une palette de couleurs en niveaux de gris et des éléments interactifs riches, réactif et incluant la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="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-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
            <div class="flex items-center justify-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
            </div>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" required>
                <span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </div>
    </form>
</div>

Formulaire d’inscription au neumorphisme

Composant du formulaire d’enregistrement de neumorphisme avec prise en charge du thème sombre à l’aide de Tailwind CSS

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-md w-full bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-8">Register</h2>
    <form>
      <div class="mb-6">
        <label for="username" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transform hover:scale-105 transition-transform duration-200 ease-in-out">Register</button>
    </form>
    <p class="text-center text-gray-600 dark:text-gray-300 text-sm mt-6">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500">Login here</a>.</p>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 14px #a7a7a7, -7px -7px 14px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 14px #4d4d4d, -7px -7px 14px #1a1a1a;
  }

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

  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #4d4d4d, inset -5px -5px 10px #1a1a1a;
  }

  .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #1a1a1a;
  }
</style>

Formulaire d’inscription pour brutalisme

Formulaire d’inscription Composant avec un design brutaliste, une palette de couleurs triadique et une complexité simple, adapté à un tableau de bord. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.

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 p-8 rounded-lg shadow-md w-full max-w-sm border-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white mb-8 font-mono">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Username</label>
        <input type="text" id="username" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Email</label>
        <input type="email" id="email" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Password</label>
        <input type="password" id="password" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white font-mono
                       dark:bg-blue-700 dark:hover:bg-blue-900">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500 font-mono" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription minimaliste et réactif conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des espaces propres avec un minimum d’éléments.

Ouvrir l’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 shadow-md rounded-lg p-6 max-w-md w-full">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center">Create Account</h2>
        <form class="mt-6 space-y-4">
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Name</label>
                <input type="text" id="name" name="name" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="Your Name">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="••••••••">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Avatar</label>
                <div class="flex items-center space-x-4">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border border-gray-300 dark:border-gray-600">
                    <input type="file" id="avatar" name="avatar" class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200">
                </div>
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-2 px-4 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">Register</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a>
        </p>
    </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec des micro-interactions et la prise en charge du thème sombre, stylisé avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-11/12 max-w-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Full Name</label>
        <input type="text" id="name" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="John Doe" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email Address</label>
        <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="[email protected]" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="********" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Profile Picture</label>
        <div class="flex items-center mb-2">
          <img id="avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 mr-3">
          <input type="file" class="bg-gray-200 dark:bg-gray-700 rounded p-2 dark:border-gray-700" accept="image/*">
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Upload a profile picture (optional)</div>
      </div>

      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded transition duration-200">Register</button>
    </form>
  </div>
</div>

Un composant élégant de formulaire d’inscription en mode sombre utilisant Tailwind CSS, avec des champs pour les informations sur l’utilisateur et un design réactif.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="username">Username</label>
                <input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="email">Email</label>
                <input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="password">Password</label>
                <input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
                <label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
        </form>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
    <footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>

Composant du formulaire d’inscription

Un formulaire d’inscription minimaliste au design plat avec des effets réactifs et une prise en charge du thème sombre, à l’aide de Tailwind CSS.

Ouvrir l’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 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
                <div class="mt-1 flex justify-center">
                    <img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
                </div>
                <p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
        </form>
        <p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
    </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif de style Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, prenant en charge le mode sombre et affichant des images de remplacement.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
        <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 focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" 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 focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
                <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
            </div>
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
    </form>
</div>

Formulaire d’inscription

Un composant de formulaire d’inscription minimaliste doté de Tailwind CSS, prenant en charge le mode sombre et les fonctionnalités de conception réactive.

Ouvrir l’aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <form class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="name">Full Name</label>
            <input type="text" id="name" 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 focus:outline-none focus:shadow-outline" placeholder="John Doe" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
            <input type="email" id="email" 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 focus:outline-none focus:shadow-outline" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
            <input type="password" id="password" 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 focus:outline-none focus:shadow-outline" placeholder="********" required />
        </div>
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 focus:ring focus:ring-blue-500" id="terms" required />
                <label for="terms" class="ml-2 block text-gray-700 dark:text-gray-300 text-sm">I accept the Terms and Conditions</label>
            </div>
        </div>
        <div class="mb-6">
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:shadow-outline">Register</button>
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a></p>
    </form>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Catégories

Formulaire d’inscription