Photography_Contact_Form
Un modulo di contatto pulito e minimalista per i portfolio fotografici, ispirato alla tipografia svizzera/internazionale, caratterizzato da una tavolozza di colori retrò/vintage tenui. Completamente reattivo con supporto per la modalità scura.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
<div>
<h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
Contact Photographer
</h2>
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
Get in touch for bookings or inquiries.
</p>
</div>
<form class="space-y-6" action="#" method="POST">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Name
</label>
<div class="mt-1">
<input id="name" name="name" type="text" autocomplete="name" required class="appearance-none 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 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
</div>
</div>
<div>
<label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Email address
</label>
<div class="mt-1">
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none 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 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Message
</label>
<div class="mt-1">
<textarea id="message" name="message" rows="4" required 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 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
</div>
</div>
<div>
<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-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
Send Message
</button>
</div>
</form>
</div>
</div>Componenti correlati
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.
Componente Moduli
Forma il componente con lo stile Glassmorphism, la combinazione di colori vivaci e la complessità semplice per il portfolio. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS. Niente JavaScript.
Gaming_Material_Form
Una forma reattiva a tema di gioco ispirata ai principi del Material Design, con colori triadici, effetti di profondità e supporto per la modalità oscura. Adatto per l'accesso, la registrazione o le impostazioni di gioco.