Home
Freja Jensen
Contact us page

Contact us page

This tailwind example is contributed by Freja Jensen, on 26-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author Freja Jensen

12.7k

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 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>
            </form>
        </div>
    </div>
</div>

Related Examples

Get in touch contact form

Author:
Kris Showen

3 years ago

42.3k
Contact page

Author:
Mahir

3 years ago

17.9k
Visit us section with google map
useful for landing pages

Author:
Santos78

3 years ago

17.4k
Contact us form template

Author:
Lukas Müller

3 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

8.6k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

1 year ago

1.5k
Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Author:
Juraj

7 months ago

461
Contact us section
Minimal contact us form

Author:
Geoffrey Callaghan

2 years ago

6.1k
tailwind contact form
Nice looking tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

3.3k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

2 years ago

6.9k
Contact us page template
full page fancy contact us page

Author:
Lukas Müller

3 years ago

17.8k
Responsive Contact Information and Inquiry Form Component
This component is a fully responsive and reusable section designed for websites that need to display contact information alongside a user inquiry form. It is built with Tailwind CSS for easy customization and integration into any projec

Author:
Vikas Kushwah

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components