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
Gaming_Material_Form
Une forme réactive sur le thème du jeu inspirée des principes de conception matérielle, avec des couleurs triadiques, des effets de profondeur et la prise en charge du mode sombre. Convient pour la connexion, l’inscription ou les paramètres de jeu.
Corporate_Banking_Login_Form
Un formulaire de connexion minimaliste et plat adapté aux applications financières et bancaires d’entreprise, avec des tons bleus professionnels, une réactivité totale et une prise en charge du mode sombre.
Composant Formulaires
Un composant de formulaire complexe et réactif avec des arrière-plans dégradés multicolores et des transitions fluides, adapté aux applications technologiques/SaaS. Comprend la prise en charge du mode sombre et des éléments interactifs.