Responsive Contact Form with TailwindCSS

A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

This tailwind example is contributed by SHARIFUL ISLAM, on 17-Feb-2025. 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 SHARIFUL ISLAM

Tailwind v3.4 2k 2

Fork Fullscreen

<h2 class="text-xl font-semibold text-gray-800">
            <span class="text-green-600 font-bold">Get Help?</span> Please Write Your Subject, Message & Notify Your Email.
        </h2>

<form class="mt-5 space-y-4">
            <div>
                <label class="block font-medium text-gray-700">Full Name*</label>
                <input type="text" placeholder="Type Name" class="w-full mt-1 p-3 border rounded-md focus:ring-2 focus:ring-green-500 outline-none">
            </div>
            
            <div>
                <label class="block font-medium text-gray-700">Email*</label>
                <input type="email" placeholder="Type Your Email" class="w-full mt-1 p-3 border rounded-md focus:ring-2 focus:ring-green-500 outline-none">
            </div>

<div>
                <label class="block font-medium text-gray-700">Subject*</label>
                <input type="text" placeholder="Type Here" class="w-full mt-1 p-3 border rounded-md focus:ring-2 focus:ring-green-500 outline-none">
            </div>

<div>
                <label class="block font-medium text-gray-700">Your Message*</label>
                <textarea placeholder="Type Here" rows="4" class="w-full mt-1 p-3 border rounded-md focus:ring-2 focus:ring-green-500 outline-none"></textarea>
            </div>

<button type="submit" class="w-full py-3 text-white bg-green-600 rounded-md hover:bg-green-700 transition">
                Send Message
            </button>
        </form>
    </div>

</body>