Componente Retro Vintage Forms

<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>