CCHub Logo CCHub Tailwind Collection
Komponenten Formt Komponente "Formulare"

Komponente "Formulare"

Formularkomponente mit Glassmorphism-Stil, lebendigem Farbschema und einfacher Komplexität für Portfolio. Responsives Design mit Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente "Formulare"

Eine klare, minimalistische Formkomponente nach den Prinzipien der schweizerischen/internationalen Typografie mit einer juwelenfarbenen Farbgebung. Ideal für professionelle Beratungs- oder Service-Websites, die volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus bieten.

Offen

Gaming_Material_Form

Eine reaktionsschnelle Gaming-Form, die von den Prinzipien des Material Designs inspiriert ist, mit triadischen Farben, Tiefeneffekten und Unterstützung für den Dunkelmodus. Geeignet für Anmeldung, Registrierung oder Spieleinstellungen.

Offen

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.

Offen