CCHub Logo CCHub Tailwind Collection
Komponenten Formt Glassmorphism Forms Komponente

Glassmorphism Forms Komponente

Glassmorphism Forms Component mit Erdtönen, responsivem Design und Unterstützung für dunkle Themen für einen Blog/eine Content-Website.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Komponente "Formulare"

Eine komplexe, reaktionsschnelle, Dark-Theme-fähige Formularkomponente für Social-Media-Schnittstellen mit monochromatischem 3D-Design. Verwendet Tailwind CSS mit dark:-Präfixen für den dunklen Modus und enthält Beispielformularelemente.

Offen

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

Organisches/von der Natur inspiriertes Gesundheitsformular

Eine einfache, reaktionsschnelle Formularkomponente mit einem natürlichen, fließenden Design, einem blauen Farbschema und Unterstützung des Dunkelmodus, die sich für das Gesundheitswesen und medizinische Anwendungen eignet.

Offen