Build Your Way with WavyKits

Components

<section class="py-20 bg-gray-50 dark:bg-gray-800">
    <div class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-16 text-center">
            <h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
                Get in Touch
            </h2>
            <p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
                Have questions or ready to start your project? Reach out to us, and our team will respond promptly.
            </p>
        </div>
        <div class="max-w-2xl mx-auto p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
            <form action="#" method="POST" class="space-y-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
                    <input type="text" id="name" name="name" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                    <input type="email" id="email" name="email" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                </div>
                <div>
                    <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
                    <input type="text" id="subject" name="subject" class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                </div>
                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                    <textarea id="message" name="message" rows="5" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"></textarea>
                </div>
                <button type="submit" class="transition-all duration-200 w-full px-6 py-3 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Send Message</button>
            </form>
        </div>
    </div>
</section>