Formes

Formulaire de médias sociaux brutaliste

Un composant de forme simple et brutaliste pour les médias sociaux avec une palette de couleurs triadique et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism p-6 max-w-md w-full"><h2 class="text-2xl md:text-3xl font-bold mb-6 text-black dark:text-white uppercase tracking-wider">Share Your Thoughts</h2><form><div class="mb-4"><label for="post-content" class="block text-black dark:text-white text-sm font-bold mb-2">What's on your mind?</label><textarea id="post-content" rows="4" class="block w-full px-3 py-2 text-black dark:text-white bg-yellow-300 dark:bg-yellow-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></textarea></div><div class="mb-4"><label for="tags" class="block text-black dark:text-white text-sm font-bold mb-2">Tags (comma-separated):</label><input type="text" id="tags" class="block w-full px-3 py-2 text-black dark:text-white bg-purple-400 dark:bg-purple-700 border-2 border-black dark:border-white focus:outline-none focus:ring-0 focus:border-red-500 dark:focus:border-red-400 placeholder-black dark:placeholder-gray-300"></div><button type="submit" class="w-full bg-red-500 dark:bg-red-600 text-white dark:text-black font-bold py-3 px-4 border-2 border-black dark:border-white active:bg-red-700 dark:active:bg-red-800 uppercase tracking-wider">Post</button></form></div></div>

Composante des formes brutalistes

Un simple composant de formes de style brutaliste pour les médias sociaux. Il présente un design brut à contraste élevé utilisant des couleurs en niveaux de gris et est réactif avec la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
    <form>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
        <div class="flex items-center mb-4">
            <img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
            <input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded"> 
        </div>
        
        <button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
    </form>
</div>

Composant Formulaires 3D

Un composant de formulaires simple et réactif avec des éléments de conception 3D et des couleurs pastel pour les interfaces de médias sociaux, prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">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-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
        </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-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" 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">
        </div>
        <div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
        </div>
    </form>
    <div class="mt-4">
        <img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
    </div>
</div>

Composant Formulaires

Un composant de formulaire complexe et réactif avec prise en charge du thème sombre pour les sites Web de blog/contenu, conçu dans un style minimaliste/plat à l’aide d’une palette de couleurs analogue.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6 md:p-12">
  <div class="container mx-auto">
    <div class="flex flex-col lg:flex-row bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
      
      <!-- Form Section -->
      <div class="lg:w-1/2 p-8 lg:p-12">
        <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Contact Us</h2>
        
        <form>
          <div class="mb-6">
            <label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Name">
          </div>

          <div class="mb-6">
            <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" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Email">
          </div>

          <div class="mb-6">
            <label for="subject" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Subject</label>
            <input type="text" id="subject" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Subject of your message">
          </div>

          <div class="mb-6">
            <label for="message" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Message</label>
            <textarea id="message" rows="6" class="shadow appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600" placeholder="Your Message"></textarea>
          </div>

          <div class="flex items-center justify-between">
            <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
              Send Message
            </button>
          </div>
        </form>
      </div>

      <!-- Image/Content Section (Analogous Color Scheme Example) -->
      <div class="lg:w-1/2 bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 p-8 lg:p-12 flex items-center justify-center">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-white mb-4">Get in Touch</h3>
          <p class="text-white text-opacity-90 mb-6">We'd love to hear from you! Fill out the form to get in touch with our team.</p>
          
          <!-- Example of complex elements: Icons and contact info -->
          <div class="text-white text-opacity-90">
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.242-4.243m2.828 2.828l1.414-1.414m-5.656-5.656l1.414-1.414m6.364 6.364l-1.414 1.414m-7.071-7.071l1.414-1.414M3.432 7.393c-2.102 2.101-2.102 5.514 0 7.615a5.656 5.656 0 008.012 0l-4.243-4.242a1.997 1.997 0 010-2.828l4.243-4.242a5.656 5.656 0 00-8.012 0z"/>
              </svg>
              <p>123 Main Street, Anytown, USA</p>
            </div>
            <div class="flex items-center justify-center mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-7 13a9 9 0 110-18 9 9 0 010 18z"/>
              </svg>
              <p>[email protected]</p>
            </div>
            <div class="flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
              </svg>
              <p>+1 234 567 890</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant de formulaire de médias sociaux avec conception 3D et couleurs vives

Un composant de formulaire de réseau social complexe, réactif et dynamique inspiré de la 3D avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 dark:from-gray-900 dark:to-black p-10">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/600" alt="Social media background">
      </div>
      <div class="p-8 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-400 font-semibold">Connect & Share</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Join the Conversation</a>
          <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Enter your details below to connect with friends and family and share your moments.</p>
        </div>
        <div class="mt-6">
          <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-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Choose a username">
            </div>
            <div class="mb-4">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold 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-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </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-300 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Create a password">
            </div>
            <div class="flex items-center justify-between">
              <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transform transition duration-500 hover:scale-105" type="button">
                Sign Up
              </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-600" href="#">
                Forgot Password?
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Formulaires

Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg">
    <div class="px-6 py-8">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-white">Contact Us</h2>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="name" class="sr-only">Name</label>
            <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Name">
          </div>
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Email address">
          </div>
          <div>
            <label for="message" class="sr-only">Message</label>
            <textarea id="message" name="message" rows="4" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm bg-white dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50" placeholder="Message"></textarea>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
            Send Message
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

Composant Formulaires

Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.

Ouvrir l’aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-vibrant-600 dark:text-vibrant-400 text-center">Join Our Community</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" placeholder="Your Name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" placeholder="Your Email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" placeholder="Your Password" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
                <input type="file" class="mt-1 block w-full mb-4 text-sm text-gray-500 dark:text-gray-400 dark:bg-gray-600" accept="image/*">
                <img src="https://picsum.photos/200" alt="Profile Preview" class="w-full h-32 object-cover rounded-lg mb-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bio</label>
                <textarea placeholder="Tell us about yourself" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" rows="4" required></textarea>
            </div>
            <button type="submit" class="w-full py-2 px-4 mt-4 text-white bg-vibrant-600 rounded-md hover:bg-vibrant-700 focus:outline-none focus:ring-2 focus:ring-vibrant-500 dark:bg-vibrant-500 dark:hover:bg-vibrant-600">Submit</button>
        </form>
        <p class="text-center text-sm text-gray-500 dark:text-gray-400">Already have an account? <a href="#" class="text-vibrant-600 dark:text-vibrant-400 hover:underline">Log in</a></p>
    </div>
</div>

Composant Formulaires

Composant de formulaire de conception matérielle complexe avec une palette de couleurs triadique pour un tableau de bord. Il est réactif et prend en charge le mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Dashboard Settings</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <label for="username" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="john.doe">
      </div>
      <div>
        <label for="email" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
      </div>
      <div>
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="********">
      </div>
      <div class="md:col-span-2">
        <label for="bio" class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Bio</label>
        <textarea id="bio" rows="4" class="w-full px-4 py-2 border rounded-lg dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-500" placeholder="Tell us about yourself..."></textarea>
      </div>
      <div class="md:col-span-2">
        <label class="block text-gray-700 dark:text-gray-200 font-bold mb-2">Notification Settings</label>
        <div class="flex items-center mb-4">
          <input type="checkbox" id="email-notifications" class="mr-2">
          <label for="email-notifications" class="text-gray-700 dark:text-gray-200">Receive email notifications</label>
        </div>
        <div class="flex items-center">
          <input type="checkbox" id="push-notifications" class="mr-2">
          <label for="push-notifications" class="text-gray-700 dark:text-gray-200">Receive push notifications</label>
        </div>
      </div>
    </div>
    <div class="flex justify-end mt-8">
      <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-4">Cancel</button>
      <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Save Settings</button>
    </div>
  </div>
</div>

Composante des formes brutalistes

Un composant de formulaires Web conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles, adapté au commerce électronique et réactif avec la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
    <form class="space-y-4">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
            <img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
        </div>
        <button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
    </form>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
    </p>
</div>

Composant Formes neumorphes

Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Neumorphic Forms Component</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-8 w-4/5 max-w-md">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="name" type="text" placeholder="John Doe">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="password" type="password" placeholder="••••••••">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Sign Up</button>
            </div>
        </form>
        <div class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <p>Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Log In</a></p>
        </div>
    </div>
</body>
</html>

Catégories