Home
Geoffrey Callaghan
Contact us page

Contact us page

Forked from> @freja-jensen/contact-us-page

This tailwind example is contributed by Geoffrey Callaghan, on 02-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author Geoffrey Callaghan

Fork Fullscreen

<div class="bg-gray-100">
    <div class="container mx-auto py-12">
        <div class="max-w-lg mx-auto px-4">
            <h2 class="text-3xl font-semibold text-gray-900 mb-4">
                How can we help you
            </h2>
            <p class="text-gray-700 mb-8">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis velit
                eget nisi lobortis dignissim.
            </p>
           <form action="https://fabform.io/f/{form-id}" method="post" class="bg-white rounded-lg px-6 py-8 shadow-md">
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="name">Name</label>
                    <input
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="name" type="text" placeholder="Enter your name">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="email">Email</label>
                    <input
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="email" type="email" placeholder="Enter your email">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="message">Message</label>
                    <textarea
                        class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        id="message" rows="6" placeholder="Enter your message"></textarea>
                </div>
                <div class="flex justify-end">
                    <button
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="button">
                        Send
                    </button>
                </div>
                   <a href="https://veilmail.io/e/FkKh7o" class="font-medium text-blue-600 hover:underline">Or click here to reveal our protected email address</a>
    
            </form>
        </div>
    </div>
</div>

Related Examples

Simple contact us form

Author:
Lukas Müller

3 years ago

12.7k
Contact Form

Author:
Sophia Baker

3 years ago

11k
Contact Us

Author:
ariaw

11 months ago

939
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

1 year ago

1.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Hasan AlDoy (McDoy)

4 months ago

441
Contact us Form with Responsive

Author:
KULDEEP

1 year ago

1.1k
Contact us form
Contact us form with contact details

Author:
Kris Showen

3 years ago

13.5k
damatebis forma

Author:
Tamaz gogitidze

2 years ago

2.8k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

1 year ago

2.1k
Call Display UI built with Tailwind CSS
Here's a Call Display UI built with Tailwind CSS that mimics an incoming/ongoing call screen with a modern design:

Author:
irahoza daniel

1 year ago

957
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Author:
Homayoun

11 months ago

1.5k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

6.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components