Retro Vintage Forms Component
A complex forms component designed in a retro/vintage style with a pastel color scheme, suitable for professional business websites and responsive with dark mode support.
HTML Code
<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>
Related Components
3D Forms Component
A simple, responsive forms component with 3D design elements and pastel colors for social media interfaces, supporting dark mode.
Retro/Vintage Forms Component
A forms component styled with retro/vintage aesthetics inspired by the 80s and 90s, featuring responsive design and dark theme support using Tailwind CSS.
Forms Component
Forms Component with Glassmorphism style, Vibrant color scheme, and Simple complexity for Portfolio. Responsive design with dark theme support using Tailwind CSS. No JavaScript.