Contact me form

This tailwind example is contributed by Arya, on 29-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Arya

Tailwind v3.4 12.9k 14

Fork Fullscreen

<div class="h-screen bg-gray-800">
    <div class="pt-10 md:pt-20">
        <div class="p-4 md:p-8">
            <h1 class="text-white text-center pb-8 font-light text-4xl md:text-5xl lg:text-6xl">Contact Me</h1>
            <form class="flex flex-col items-center">
                <div class="md:w-3/4 lg:w-2/3 xl:w-1/2">
                    <div class="flex flex-col md:flex-row">
                        <input id="name" type="text"
                            class="my-2 py-2 px-4 rounded-md bg-gray-900 text-gray-300 w-full md:w-1/2 md:mr-2 outline-none focus:ring-2 focus:ring-blue-600"
                            placeholder="Name">
                        <input id="email" type="email"
                            class="my-2 py-2 px-4 rounded-md bg-gray-900 text-gray-300 w-full md:w-1/2 md:ml-2 outline-none focus:ring-2 focus:ring-blue-600"
                            placeholder="Email">
                    </div>
                    <input id="subject" type="text" placeholder="Subject"
                        class="my-2 py-2 px-4 rounded-md bg-gray-900 text-gray-300 w-full outline-none focus:ring-2 focus:ring-blue-600">
                    <textarea id="message" rows="5" placeholder="Say Something"
                        class="my-2 py-2 px-4 rounded-md bg-gray-900 text-gray-300 w-full outline-none focus:ring-2 focus:ring-blue-600"></textarea>
                </div>
                <button
                    class="border-2 text-md mt-5 rounded-md py-2 px-4 bg-blue-600 hover:bg-blue-700 text-gray-100 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600">
                    Send Message
                </button>
            </form>
        </div>
    </div>
</div>