CCHub Logo CCHub Tailwind Collection
Komponenten Formt Komponente "Formulare"

Komponente "Formulare"

Eine einfache, minimalistische Formularkomponente, die nach den Prinzipien der schweizerischen/internationalen Typografie gestaltet wurde und ein gedämpftes Farbschema verwendet, das für Dokumentations- oder Wiki-Seiten geeignet ist. Es ist vollständig responsiv und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Minimalistische Juwelenfarbe Regierungsform

Eine reaktionsschnelle, minimalistische Formularkomponente für Websites von Behörden oder öffentlichen Diensten mit Juwelentönen und Unterstützung für den Dunkelmodus. Es enthält Felder für persönliche Informationen, Kontaktdaten und eine Nachricht.

Offen

Brutalism_Music_Audio_Form

Eine komplexe, brutalistische Form für Musik-/Audioplattformen mit einem Candy/Sweet-Farbschema mit mehreren Eingabetypen, Unterstützung für den Dunkelmodus und voller Reaktionsfähigkeit.

Offen

Corporate_Professional_Contact_Form

Eine saubere, professionelle und reaktionsschnelle Kontaktformular-Komponente, die mit einer Wald-/Grünpalette gestaltet ist und sich für Unternehmens- oder Portfolio-Websites eignet. Enthält Unterstützung für den Dunkelmodus und moderne Designfunktionen.

Offen