Composants Formes Composant Formulaires

Composant Formulaires

Un composant de forme épuré et minimaliste conçu selon les principes de la typographie suisse/internationale, avec une palette de couleurs aux tons de bijou. Idéal pour les sites de conseil ou de services professionnels, offrant une réactivité totale et un support en mode sombre.

Aperçu

HTML Code

<div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
  <div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
      Get in Touch
    </h2>
    <p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      We'd love to hear from you. Please fill out the form below.
    </p>

    <form>
      <div class="mb-5">
        <label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          FULL NAME
        </label>
        <input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          EMAIL ADDRESS
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          YOUR MESSAGE
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
      </div>

      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
          SUBMIT
        </button>
      </div>
    </form>
  </div>
</div>

Composants associés

JobApplicationForm_WatercolorArtistic

Un formulaire de candidature complexe et réactif avec un style aquarelle/design artistique et une palette de couleurs arc-en-ciel dégradée. Comprend des sections pour les détails personnels, l’expérience, l’éducation et les téléchargements de fichiers, avec prise en charge du mode sombre, adaptées aux sites d’emploi et aux plateformes de carrière.

Ouvrir