Rechercher des composants

Catégories

Composants Formulaire d’inscription

Formulaire d’inscription

Formulaire de création de nouveaux comptes utilisateurs

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif conçu avec un style skeuomorphe, utilisant une palette de couleurs monochromatiques et adapté aux expériences de commerce électronique. Il prend en charge le mode sombre et comprend des fonctions de saisie interactives pour l’enregistrement des utilisateurs.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg p-8 w-full max-w-lg">
        <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6 text-center">Create Your Account</h2>
        <div class="flex justify-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-24 h-24 border-2 border-gray-500 dark:border-gray-600 shadow-lg">
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200  bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter 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 type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter 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 type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
                    <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
                </label>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-300 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Already have an account? <a href="#" class="text-gray-800 dark:text-gray-200 font-medium">Login</a>
        </p>
    </div>
</div>

Composant du formulaire d’inscription

Composant de formulaire d’inscription avec mode sombre, couleurs vives et complexité modérée pour le blog/le contenu.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
  <div class="bg-gray-800 dark:bg-gray-900 p-10 rounded-lg shadow-xl w-full max-w-md">
    <h1 class="text-2xl font-bold text-teal-400 dark:text-teal-500 mb-6 text-center">Register</h1>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Username</label>
        <input type="text" id="username" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 dark:text-gray-500 text-sm font-semibold mb-2">Password</label>
        <input type="password" id="password" class="form-input w-full px-4 py-2 bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-bold py-2 px-4 rounded-md hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Register</button>
    </form>
  </div>
</div>

Composant du formulaire d’inscription

Un formulaire d’inscription réactif avec la conception Neumorphism, une palette de couleurs analogue et la prise en charge du mode sombre, construit avec Tailwind CSS à des fins de médias sociaux.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm p-8 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
    <form>
      <div class="mb-5">
        <label for="username" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your username">
      </div>
      <div class="mb-5">
        <label for="email" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800 dark:text-white shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark" placeholder="Enter your password">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 shadow-neumorphism-light dark:shadow-neumorphism-dark">Register</button>
    </form>
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300">
      Already have an account? <a href="#" class="font-medium text-blue-500 hover:underline">Login</a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphism-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
  .shadow-inner-neumorphism-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphism-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
  }
</style>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription avec une conception Neumorphism, une palette de couleurs en niveaux de gris, une complexité modérée et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-gray-300 to-gray-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Register</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:opacity-100 dark:text-gray-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Password</label>
            </div>
            <div class="relative">
              <button class="bg-gray-500 text-white rounded-md px-2 py-1 dark:bg-gray-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant du formulaire d’inscription

Un formulaire d’inscription simple avec un design pastel 3D, réactif et avec prise en charge du mode sombre. Convient pour un blog ou un site de consommation de contenu.

Ouvrir Aperçu

                <div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
          Register
        </button>
      </div>
    </form>
  </div>
</div>

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