Home
SHARIFUL ISLAM
Responsive Contact Form with TailwindCSS

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 CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us

Author SHARIFUL ISLAM

411

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>

Related Examples

Feedback form
Collect opinions about your company's service

Author:
Arya

2 years ago

13k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

1 week ago

34
contact form
contact form

Author:
Geoffrey Callaghan

1 year ago

5.9k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

1 year ago

5.2k
Age verification 18+

Author:
Maxim

3 months ago

418
Login form

Author:
Gopi Yadav

2 years ago

10.1k
Contact Information section with form
A section that displays ways to connect, featuring icons for social media and clickable email addresses.

Author:
Junclarkaizen Pagu

1 year ago

7k
Upload file input field

Author:
Gopi Yadav

2 years ago

13.1k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

3 weeks ago

268
Get in touch contact form

Author:
Kris Showen

1 year ago

38.1k
Form

Author:
Ramesh kumar Sah

6 days ago

17
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

1 month ago

349

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components