Photography_Contact_Form
Un formulaire de contact épuré et minimaliste pour les portfolios de photographie, inspiré de la typographie suisse/internationale, avec une palette de couleurs rétro/vintage discrète. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Formulaires
Un composant de formulaires réactifs conçu dans un style minimaliste, adapté aux interfaces de médias sociaux, avec des couleurs vives, une prise en charge du mode sombre et des interactions complexes.
Composant Formulaires
Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Brutalism_Music_Audio_Form
Une forme complexe, de style brutaliste, pour les plates-formes musicales/audio avec une palette de couleurs bonbon/doux, avec plusieurs types d’entrée, la prise en charge du mode sombre et une réactivité totale.