Home
Geoffrey Callaghan
Contact us page template

Contact us page template

Forked from> @lukas-muller/contact-us-page-template

full page fancy 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. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Geoffrey Callaghan

6.5k

7

Fork Fullscreen

<div class="min-h-screen bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
        <div
            class="absolute inset-0 bg-gradient-to-r from-indigo-700 to-purple-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl">
        </div>
        <div class="text-white relative px-4 py-10 bg-indigo-400 shadow-lg sm:rounded-3xl sm:p-20">

<div class="text-center pb-6">
                <h1 class="text-3xl">Contact Us!</h1>

<p class="text-gray-300">
                    Fill up the form below to send us a message.
                </p>
            </div>

<form action="https://fabform.io/f/{form-id}" method="post">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Name" name="name">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="email" placeholder="Email" name="email">

<input
                        class="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Subject" name="_subject">

<textarea
                        class="shadow mb-4 min-h-0 appearance-none border rounded h-64 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                        type="text" placeholder="Type your message here..." name="message" style="height: 121px;"></textarea>

<div class="flex justify-between">
                    <input
                        class="shadow bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="submit" value="Send ➤">
                    <input
                        class="shadow bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                        type="reset">
                </div>
<a href="https://veilmail.io/e/FkKh7o" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Or click here to reveal our protected email address</a>
    
            </form>
        </div>
        
    </div>
</div>

Related Examples

Get in touch contact form

Author:
Kris Showen

1 year ago

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

Author:
Lukas Müller

2 years ago

15.3k
Contact page

Author:
Mahir

1 year ago

16.3k
Glassmorphism form

Author:
Sophia Baker

1 year ago

16k
Feedback form
Collect opinions about your company's service

Author:
Arya

2 years ago

12.8k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

4 months ago

1.4k
Upload file input field

Author:
Gopi Yadav

2 years ago

12.8k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

1 year ago

10k
Post Detail
Post detail with form

Author:
Sedat Kumcu

3 months ago

556
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

1 month ago

220
Register form

Author:
Maxim

1 month ago

295
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

9 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1