Rechercher des composants

Catégories

Formes

Collection de champs pour la collecte des données de l’utilisateur

Neumorphic_Fashion_Form

Un composant de forme neumorphe complexe, réactif et avec une palette de couleurs sourdes/désaturées, conçu pour les marques de mode et de beauté, avec plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-200 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 rounded-3xl shadow-neumorphic-light-xl p-6 sm:p-10 md:p-12 transition-all duration-300 dark:bg-gray-800 dark:shadow-neumorphic-dark-xl">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-700 mb-8 text-center dark:text-gray-200">
      Elevate Your Style Profile
    </h2>

    <form action="#" method="POST">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
        <!-- Personal Information Section -->
        <div class="col-span-full mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Personal Details</h3>
        </div>

        <!-- First Name -->
        <div>
          <label for="first-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">First Name</label>
          <input type="text" id="first-name" name="first-name" placeholder="Jane" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Last Name -->
        <div>
          <label for="last-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Last Name</label>
          <input type="text" id="last-name" name="last-name" placeholder="Doe" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Email Address -->
        <div class="md:col-span-2">
          <label for="email" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Styling Preferences Section -->
        <div class="col-span-full mt-6 mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Styling Preferences</h3>
        </div>

        <!-- Style Category Multi-select -->
        <div class="md:col-span-2">
          <label for="style-category" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Style Categories</label>
          <div class="relative">
            <select multiple id="style-category" name="style-category[]" class="w-full p-3 pr-10 appearance-none bg-gray-200 rounded-xl shadow-neumorphic-inset-light focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200 h-32 sm:h-auto min-h-[100px] sm:min-h-0">
              <option value="casual">Casual Chic</option>
              <option value="boho">Bohemian Rhapsody</option>
              <option value="minimalist">Minimalist Elegance</option>
              <option value="glam">Glamour & Evening</option>
              <option value="sporty">Sporty Luxe</option>
              <option value="vintage">Vintage Charm</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 dark:text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2 dark:text-gray-500">Hold Ctrl/Cmd to select multiple options.</p>
        </div>

        <!-- Body Type Radios -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Body Type</label>
          <div class="space-y-3">
            <div class="flex items-center">
              <input type="radio" id="hourglass" name="body-type" value="hourglass" class="hidden peer">
              <label for="hourglass" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Hourglass
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="rectangle" name="body-type" value="rectangle" class="hidden peer">
              <label for="rectangle" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Rectangle
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="pear" name="body-type" value="pear" class="hidden peer">
              <label for="pear" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Pear
              </label>
            </div>
          </div>
        </div>

        <!-- Preferred Colors Checkbox Group -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Color Palette</label>
          <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center select-none">
              <input type="checkbox" id="neutral" name="colors[]" value="neutral" class="hidden peer">
              <label for="neutral" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Neutrals</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="pastels" name="colors[]" value="pastels" class="hidden peer">
              <label for="pastels" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Pastels</span>
              </label>
            </div>
             <div class="flex items-center select-none">
              <input type="checkbox" id="bold" name="colors[]" value="bold" class="hidden peer">
              <label for="bold" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Bold Hues</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="earth" name="colors[]" value="earth" class="hidden peer">
              <label for="earth" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Earth Tones</span>
              </label>
            </div>
          </div>
        </div>

        <!-- Upload Inspiration Images -->
        <div class="md:col-span-2 mt-6">
          <label for="inspiration-upload" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Upload your style inspiration (optional)</label>
          <div class="flex justify-center items-center h-48 sm:h-56 border-2 border-dashed border-gray-300 rounded-xl shadow-neumorphic-inset-light p-4 dark:border-gray-600 dark:shadow-neumorphic-inset-dark">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8c0 4.418-4.477 8-10 8H12M28 8a4 4 0 00-4-4H12a4 4 0 00-4 4m20 0v12m4-8h-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <label for="inspiration-upload" class="relative cursor-pointer font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                  <span>Upload a file</span>
                  <input id="inspiration-upload" name="inspiration-upload" type="file" class="sr-only">
                </label>
                or drag and drop
              </p>
              <p class="text-xs text-gray-500 dark:text-gray-500">PNG, JPG, GIF up to 10MB</p>
            </div>
          </div>
        </div>

        <!-- Newsletter Opt-in Toggle -->
        <div class="col-span-full mt-6">
           <div class="flex items-center justify-between py-3 px-4 rounded-xl shadow-neumorphic-light text-gray-700 dark:bg-gray-800 dark:shadow-neumorphic-dark transition-all duration-200">
            <span class="text-base font-medium dark:text-gray-200">Receive personalized fashion tips</span>
            <label for="newsletter-toggle" class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" id="newsletter-toggle" name="newsletter-optin" value="true" class="sr-only peer">
              <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 dark:bg-gray-600 transition-all duration-200">
              </div>
            </label>
          </div>
        </div>

      </div>

      <!-- Submit Button -->
      <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-700 flex justify-center">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-full text-lg font-semibold text-white bg-indigo-500 shadow-neumorphic-button-light hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 focus:ring-indigo-500 dark:bg-indigo-700 dark:shadow-neumorphic-button-dark dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800 dark:focus:ring-indigo-700 transition-all duration-200">
          Update Profile
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom Tailwind CSS Shadow Utilities for Neumorphism */
  /* Light Mode Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #a3a3a3, -10px -10px 20px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-active-light {
    box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 6px 6px 12px rgba(99, 102, 241, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.7);
  }

  /* Dark Mode Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #262626;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #3d3d3d, -10px -10px 20px #2f2f2f;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #262626;
  }
  .dark .shadow-neumorphic-active-dark {
    box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #262626;
  }
   .dark .shadow-neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(67, 56, 202, 0.5), -6px -6px 12px rgba(118, 97, 246, 0.4);
  }

  /* Custom styling for multiselect to hide default arrow on some browsers */
  select[multiple]::-ms-expand {
    display: none;
  }
  select[multiple] {
    -webkit-appearance: none; /* For WebKit browsers */
    -moz-appearance: none;    /* For Gecko browsers */
    appearance: none;         /* Standard property */
  }

</style>

Gaming_Material_Form

Une forme réactive sur le thème du jeu inspirée des principes de conception matérielle, avec des couleurs triadiques, des effets de profondeur et la prise en charge du mode sombre. Convient pour la connexion, l’inscription ou les paramètres de jeu.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-orange-400 dark:from-gray-900 dark:via-purple-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden
              p-6 sm:p-8 lg:p-10 border-t-4 border-purple-600 dark:border-pink-500 transform hover:scale-105">

    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight drop-shadow-md">
        <span class="text-purple-700 dark:text-pink-500">Gamer</span> Login
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-md sm:text-lg">Enter the Arena!</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
        <div class="relative">
          <input type="text" id="username" name="username" placeholder="PlayerOne" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4H7a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3" />
          </svg>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
        <div class="relative">
          <input type="password" id="password" name="password" placeholder="********" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-pink-500 focus:border-pink-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
         <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14H4a2 2 0 01-2-2V8a2 2 0 012-2h4" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10h4a2 2 0 012 2v4a2 2 0 01-2 2h-4" />
          </svg>
        </div>
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-purple-600 dark:text-orange-400 focus:ring-purple-500 dark:focus:ring-orange-400 border-gray-300 rounded">
          <label for="remember-me" class="ml-2 block text-gray-700 dark:text-gray-300">
            Remember Me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-orange-400 dark:hover:text-amber-300 transition-colors duration-200">
            Forgot Password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-lg text-lg sm:text-xl font-bold text-white
                       bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600
                       dark:from-pink-500 dark:to-orange-400 dark:hover:from-pink-600 dark:hover:to-orange-500
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-orange-400
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       animate-pulse-on-hover">
          Level Up!
        </button>
      </div>
    </form>

    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? 
      <a href="#" class="font-medium text-orange-500 hover:text-orange-400 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">
        Sign Up for Adventure!
      </a>
    </div>

  </div>
</div>

Composant Formulaires

Un composant de forme simple et minimaliste conçu selon les principes de la typographie suisse/internationale, utilisant une palette de couleurs sourdes adaptée à la documentation ou aux sites wiki. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-850 shadow-md rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">We'd love to hear from you. Please fill out the form below.</p>
    </div>
    <form class="px-6 py-6 space-y-5">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
        <div class="mt-1">
          <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="[email protected]" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
        <div class="mt-1">
          <input type="text" name="subject" id="subject" placeholder="Inquiry about a topic" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Message</label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="5" placeholder="Type your message here..." class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"></textarea>
        </div>
      </div>

      <div class="pt-2">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Photography_Contact_Form

Un formulaire de contact épuré et minimaliste pour les portfolios de photographie, inspiré de la typographie suisse/internationale, avec une palette de couleurs rétro/vintage discrète. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
    <div>
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Contact Photographer
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
        Get in touch for bookings or inquiries.
      </p>
    </div>
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Name
        </label>
        <div class="mt-1">
          <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email address
        </label>
        <div class="mt-1">
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Message
        </label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="4" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Minimaliste Jewel Tone Forme du gouvernement

Un composant de formulaire réactif et minimaliste pour les sites Web gouvernementaux ou de service public, avec des tons de bijou et la prise en charge du mode sombre. Il comprend des champs pour les informations personnelles, les coordonnées et un message.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-6 py-8 md:px-8 bg-gradient-to-r from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Submit Your Inquiry</h2>
      <p class="text-sm sm:text-base opacity-90">Please fill out the form below with accurate information. All fields are required unless otherwise noted.</p>
    </div>

    <form class="p-6 md:p-8 space-y-6 text-gray-800 dark:text-gray-200">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="first_name" class="block text-sm font-medium mb-1">First Name</label>
          <input type="text" id="first_name" name="first_name" placeholder="John" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div>
          <label for="last_name" class="block text-sm font-medium mb-1">Last Name</label>
          <input type="text" id="last_name" name="last_name" placeholder="Doe" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium mb-1">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium mb-1">Subject of Inquiry</label>
        <select id="subject" name="subject" required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out">
          <option value="" disabled selected>Select a subject</option>
          <option value="general_inquiry">General Inquiry</option>
          <option value="technical_support">Technical Support</option>
          <option value="feedback">Feedback</option>
          <option value="report_issue">Report an Issue</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium mb-1">Your Message</label>
        <textarea id="message" name="message" rows="5" placeholder="Provide details about your inquiry..." required class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 transition duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 resize-y"></textarea>
      </div>

      <div class="flex items-center space-x-2">
        <input type="checkbox" id="terms" name="terms" required class="h-5 w-5 text-emerald-600 dark:text-emerald-500 focus:ring-emerald-500 dark:focus:ring-emerald-400 border-gray-300 dark:border-gray-600 rounded">
        <label for="terms" class="text-sm">I agree to the <a href="#" class="text-emerald-600 dark:text-emerald-500 hover:underline">terms and conditions</a>.</label>
      </div>

      <div class="flex justify-end">
        <button type="submit" class="px-8 py-3 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-semibold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-500 dark:focus:ring-emerald-600 focus:ring-opacity-50">
          Submit Inquiry
        </button>
      </div>
    </form>
  </div>
</div>

Forme industrielle brutaliste en niveaux de gris

Un composant de forme complexe, de style brutaliste avec une palette de couleurs en niveaux de gris, conçu pour les applications industrielles et manufacturières. Comprend des éléments très contrastés, des mises en page inhabituelles et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-neutral-100 dark:bg-neutral-950 p-4 sm:p-8 font-mono text-neutral-900 dark:text-neutral-50 flex items-start justify-center">
  <div class="w-full max-w-6xl border-4 border-neutral-900 dark:border-neutral-50 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] grid md:grid-cols-3 overflow-hidden">

    <!-- Left Section: Header Block -->
    <div class="md:col-span-1 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 sm:p-8 border-b-4 md:border-b-0 md:border-r-4 border-neutral-900 dark:border-neutral-50">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tighter uppercase mb-4 leading-none">MANUFACTURING OPS. DATA INPUT.</h1>
      <p class="text-sm sm:text-base mb-6 border-b-2 border-neutral-50 dark:border-neutral-900 pb-2">RECORD AND MONITOR PRODUCTION FLOW, MACHINE STATUS, AND QUALITY CONTROL METRICS.</p>
      <div class="space-y-4">
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">UTC+00:00 - 15:30:45</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">PLANT_A_UNIT_07 - ZONE 3B</span>
        </div>
      </div>
      <img src="https://picsum.photos/300/200?grayscale&random=1" alt="Industrial machinery" class="w-full h-auto mt-8 border-4 border-neutral-50 dark:border-neutral-900 object-cover" style="image-rendering: pixelated;">
    </div>

    <!-- Right Section: Form Fields -->
    <div class="md:col-span-2 p-6 sm:p-8 bg-neutral-100 dark:bg-neutral-950 ">
      <form class="space-y-6 sm:space-y-8">

        <!-- Production Data Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">PRODUCTION DATA</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
              <label for="batch-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Batch ID:</label>
              <input type="text" id="batch-id" placeholder="BCH-731-X" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="product-code" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Product Code:</label>
              <input type="text" id="product-code" placeholder="PRD-A-04" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="quantity-produced" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Quantity Produced:</label>
              <input type="number" id="quantity-produced" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div class="lg:col-span-3">
              <label for="operator-notes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Operator Notes:</label>
              <textarea id="operator-notes" rows="3" placeholder="Add any relevant observations or incidents..." class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm"></textarea>
            </div>
          </div>
        </div>

        <!-- Machine Status Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">MACHINE STATUS</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="machine-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Machine ID:</label>
              <select id="machine-id" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT MACHINE</option>
                <option value="MCH-001">CNC MILL 001</option>
                <option value="MCH-002">LASER CUTTER 002</option>
                <option value="MCH-003">ROBOTIC ARM 003</option>
              </select>
            </div>
            <div>
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Status:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="operational" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Operational</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="maintenance" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Maintenance</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="error" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Error</span>
                </label>
              </div>
            </div>
            <div>
              <label for="downtime-minutes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Downtime (min):</label>
              <input type="numbeer" id="downtime-minutes" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="last-maintenance" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Last Maintenance:</label>
              <input type="date" id="last-maintenance" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
          </div>
        </div>

        <!-- Quality Control Section -->
        <div>
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">QUALITY CONTROL</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="defects-reported" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Defects Reported:</label>
              <input type="number" id="defects-reported" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="inspection-result" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Inspection Result:</label>
              <select id="inspection-result" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT OUTCOME</option>
                <option value="pass">PASS</option>
                <option value="fail">FAIL</option>
                <option value="review">PENDING REVIEW</option>
              </select>
            </div>
            <div class="md:col-span-2">
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Attached Documents:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm mt-1">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-img" value="img-report" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Image Report</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-spec" value="spec-sheet" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Spec Sheet</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-log" value="test-log" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Test Log</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Submission & Control -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-end pt-4 border-t-2 border-neutral-400 dark:border-neutral-700">
          <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 sm:mb-0">FORM VERSION 2.1.b / ENGAGE PROTOCOL 7-ALPHA</span>
          <button type="submit" class="px-8 py-3 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 font-bold uppercase border-2 border-neutral-900 dark:border-neutral-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-none transition-all duration-150 ease-in-out text-sm sm:text-base tracking-widest">
            SUBMIT DATA
          </button>
        </div>

      </form>
    </div>

  </div>
</div>

Skeuomorphic_Social_Media_Form_Complex

Un composant de formulaire de réseau social complexe et skeuomorphe avec des couleurs complémentaires, un design réactif et une prise en charge du mode sombre. Imite les sensations et les textures des boutons du monde réel.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-t border-gray-50 border-solid dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 flex flex-col gap-8 transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 text-center drop-shadow-md tracking-tight">
      Connect and Share
    </h2>

    <!-- Post Creation Section -->
    <section class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative">
      <div class="absolute inset-0 rounded-2xl pointer-events-none"
           style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                      radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

      <div class="flex items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transform translate-z-0">
        <textarea placeholder="What's on your mind, Sarah?" class="flex-1 text-lg p-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition duration-200 appearance-none" rows="4" style="resize: none;"></textarea>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
        <div class="flex flex-wrap gap-3">
          <button class="flex items-center gap-2 p-3 rounded-full bg-blue-300 hover:bg-blue-400 active:bg-blue-500 text-blue-900 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-gray-100 font-semibold shadow-md shadow-blue-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-blue-400 dark:border-blue-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-blue-400 to-blue-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-blue-700 dark:to-blue-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5c0-.55-.45-1-1-1H5a1 1 0 00-1 1v7.586l3.293-3.293a1 1 0 011.414 0L9 11l3.293-3.293a1 1 0 011.414 0L15 10.586V5h-.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L14 13.586V5H6v8.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L4 12.586V5h-.586L2 7V5c0-.55.45-1 1-1h13zm-1 9.586L13.586 12 12 13.586l-2-2-1.414 1.414L8 15.586V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.586zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.414zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h9.586L13 13.586z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Photo/Video</span>
          </button>
          <button class="flex items-center gap-2 p-3 rounded-full bg-pink-300 hover:bg-pink-400 active:bg-pink-500 text-pink-900 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 dark:text-gray-100 font-semibold shadow-md shadow-pink-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-pink-400 dark:border-pink-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-pink-400 to-pink-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-pink-700 dark:to-pink-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Feeling/Activity</span>
          </button>
        </div>
        <button type="submit" class="px-8 py-3 rounded-full text-xl font-bold bg-green-500 hover:bg-green-600 active:bg-green-700 text-white dark:bg-green-700 dark:hover:bg-green-800 dark:active:bg-green-900 shadow-xl shadow-green-600/40 dark:shadow-none active:shadow-inner active:shadow-green-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-green-700 dark:border-green-900 relative overflow-hidden group">
          <div class="inset-0 absolute rounded-full bg-gradient-to-t from-green-600 to-green-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-green-800 dark:to-green-600"></div>
          <span class="relative z-10">Post</span>
        </button>
      </div>
    </section>

    <!-- Advanced Settings / Privacy Section -->
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top right, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom left, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Audience Settings</h3>
        <div class="mb-4">
          <label for="audience" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can see your post?</label>
          <div class="relative">
            <select id="audience" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="public">Public</option>
              <option value="friends">Friends</option>
              <option value="private">Only Me</option>
              <option value="custom">Custom</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>

        <div>
          <label for="comments" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can comment?</label>
          <div class="relative">
            <select id="comments" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="anyone">Anyone</option>
              <option value="friends">Friends</option>
              <option value="mentions">Only Mentions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Advanced Options</h3>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Enable notifications</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Save as draft</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-gray-700 dark:text-gray-300">Enable location tagging</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
      </div>
    </section>

    <!-- Call to action/secondary actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200 shadow-md shadow-gray-400/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-gray-400 dark:border-gray-600 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-gray-400 to-gray-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-gray-700 dark:to-gray-500"></div>
        <span class="relative z-10">Cancel</span>
      </button>
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:active:bg-indigo-900 shadow-xl shadow-indigo-600/40 dark:shadow-none active:shadow-inner active:shadow-indigo-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-indigo-700 dark:border-indigo-900 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-indigo-600 to-indigo-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-indigo-800 dark:to-indigo-600"></div>
        <span class="relative z-10">Save Draft</span>
      </button>
    </div>
  </div>
</div>

Glassmorphism Forms Component

Glassmorphism Forms Component avec des tons de terre, un design réactif et une prise en charge du thème sombre pour un site Web de blog/contenu.

Ouvrir Aperçu

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-8 w-full max-w-md border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center">Contact Us</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 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-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 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-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400">
      </div>
      <div class="mb-6">
        <label for="message" class="block text-stone-700 dark:text-stone-300 text-sm font-semibold mb-2">Message</label>
        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white dark:bg-stone-700 bg-opacity-70 dark:bg-opacity-70 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-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400"></textarea>
      </div>
      <button type="submit" class="w-full bg-stone-700 dark:bg-stone-600 text-white py-3 rounded-lg font-semibold hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-stone-400">
        Send Message
      </button>
    </form>
  </div>
</div>

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