Компонент ретро винтажных форм
Компонент сложных форм, выполненный в стиле ретро/винтаж с пастельной цветовой гаммой, подходит для профессиональных бизнес-сайтов и адаптивный с поддержкой темного режима.
HTML-код
<div class="bg-pastel-light dark:bg-pastel-dark p-8 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Contact Us</h2>
<form>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="name">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name" />
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email" />
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="message">Message</label>
<textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Message" rows="4"></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="service">Service Inquiry</label>
<select id="service" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline">
<option value="consulting">Consulting</option>
<option value="design">Design</option>
<option value="development">Development</option>
</select>
</div>
<div class="mb-6 flex items-center justify-between">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400" />
<span class="ml-2 text-gray-600 dark:text-gray-400 text-sm">Subscribe to our newsletter</span>
</label>
</div>
<div class="flex items-center justify-center">
<button type="submit" class="bg-pastel-primary dark:bg-pastel-secondary hover:bg-pastel-secondary dark:hover:bg-pastel-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Send
</button>
</div>
</form>
<div class="mt-6 text-center">
<img src="https://picsum.photos/seed/picsum/200/100" alt="Random Image" class="rounded-lg" />
</div>
</div>
Связанные компоненты
Компонент «Нейроморфные формы»
Компонент простых форм с дизайном в стиле неоморфизм, адаптированный для приложений электронной коммерции, с монохроматической цветовой схемой и поддержкой темного режима.
Компонент 3D Форм
Простой, адаптивный компонент форм с элементами 3D-дизайна и пастельными тонами для интерфейсов социальных сетей, поддерживающий темный режим.
Компонент бруталистских форм
Простой компонент форм в бруталистском стиле для социальных сетей. Он отличается высококонтрастным необработанным дизайном с использованием оттенков серого и адаптивной поддержкой темного режима.