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

757

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

Appointment booking form

Author:
Leif99

2 years ago

17.2k
Contact Us
This is contact us page with form

Author:
varniraj vaghela

1 year ago

1.8k
Simple contact us form

Author:
Lukas Müller

2 years ago

11.2k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

1 month ago

208
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.5k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 month ago

114
Forgot password form
Useful form for sending password reset link

Author:
Anonymous

8 months ago

972
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

1.4k
Post Detail
Post detail with form

Author:
Sedat Kumcu

8 months ago

1.2k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.4k
basichtml
this is basic html

Author:
Anonymous

3 weeks ago

92
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

6 months ago

780

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components