Formulaire d’inscription

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec un design glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.

Ouvrir l’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 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full m-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">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">Username</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" 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">Email</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" 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">Password</label>
        <input type="password" id="password" name="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 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:text-white opacity-80 backdrop-filter backdrop-blur-sm" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300">
          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-200" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec un style glassmorphism, une palette de couleurs de terre et une prise en charge du thème sombre. Conçu pour les plateformes de médias sociaux, avec une mise en page simple et des éléments minimaux. Utilise Tailwind CSS pour le style et inclut des exemples d’espaces réservés d’image.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Formulaire d’inscription au skeuomorphisme Niveaux de gris

Un composant de formulaire d’inscription skeuomorphe en niveaux de gris pour les portefeuilles, avec une complexité modérée, un design réactif et un support de thème sombre, pas de Javascript. Images de picsum.photos et randomuser.me utilisées.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-lighter դark:bg-gray-darker">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-skeuo-light dark:bg-gray-true dark:shadow-skeuo-dark">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">Register</h2>
    <form class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-black rounded-md shadow-skeuo-button hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-light dark:text-gray-900 dark:hover:bg-gray dark:focus:ring-gray-darker">Register</button>
    </form>
  </div>
</div>

<style>
.shadow-skeuo-light {
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.shadow-skeuo-dark {
  box-shadow: 10px 10px 20px #2c2c2c, -10px -10px 20px #444444;
}

.shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

.dark .shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #2c2c2c, inset -5px -5px 10px #444444;
}

.shadow-skeuo-button {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.dark .shadow-skeuo-button {
    box-shadow: 5px 5px 10px #2c2c2c, -5px -5px 10px #444444;
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}

.dark\:bg-gray-darker {
    background-color: #333333;
}

.bg-gray-true {
    background-color: #cccccc;
}

.dark\:bg-gray-true {
    background-color: #333333;
}

.dark\:text-gray-100 {
    color: #eeeeee;
}

.dark\:text-gray-300 {
    color: #cccccc;
}

.dark\:bg-gray-darkest {
    background-color: #1a1a1a;
}

.dark\:border-gray-700 {
    border-color: #4d4d4d;
}

.dark\:bg-gray-light {
    background-color: #cccccc;
}

.dark\:text-gray-900 {
    color: #1a1a1a;
}

.dark\:hover\:bg-gray {
    background-color: #808080;
}

.dark\:focus\:ring-gray-darker {
    --tw-ring-color: #333333;
}

</style>

formulaire-d-inscription-ecommerce-tailwind

Composant de formulaire d’inscription minimaliste pour le commerce électronique à l’aide de Tailwind CSS avec prise en charge du mode réactif et sombre, avec une palette de couleurs bleu-orange complémentaire.

Ouvrir l’aperçu

                <!-- Registration Form Component -->
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Create Your Account</h2>
      <form action="#" method="POST" class="space-y-4">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <input type="text" id="full-name" name="fullname" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <input type="password" id="password" name="password" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <input type="password" id="confirm-password" name="confirmPassword" required class="mt-1 block w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:ring-blue-400"/>
        </div>
        <button type="submit" class="w-full py-2 px-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-md focus:outline-none focus:ring-2 focus:ring-orange-400 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500">
          Register
        </button>
      </form>
      <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-orange-500 hover:text-orange-600 dark:text-orange-400 dark:hover:text-orange-500 font-medium">Log in</a>
      </p>
    </div>
  </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif conçu dans un style brutaliste avec une palette de couleurs pastel et adapté aux sites Web d’affaires/d’entreprise. Il prend en charge le mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" 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="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
            </div>
            <button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
        </form>
        <div class="mt-4 text-center">
            <img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
        </div>
    </div>
</div>

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

Catégories