Componente Glassmorphism Forms
Glassmorphism Forms Component con toni della Terra, design reattivo e supporto per temi scuri per un blog/sito Web di contenuti.
Codice HTML
<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>Componenti correlati
Componente Forme 3D
Un componente di moduli semplice e reattivo con elementi di progettazione 3D e colori pastello per le interfacce dei social media, che supporta la modalità scura.
Skeuomorphic_Social_Media_Form_Complex
Un componente complesso e scheumorfico per la forma dei social media con colori complementari, design reattivo e supporto per la modalità oscura. Imita le sensazioni e le trame dei pulsanti del mondo reale.
Brutalista Scala di Grigi Forma Industriale
Un componente di forma complesso, in stile brutalista, con una combinazione di colori in scala di grigi, progettato per applicazioni industriali e manifatturiere. Presenta elementi ad alto contrasto, layout insoliti e reattività completa con il supporto della modalità oscura.