Home
Lukas Müller
Contact us form template

Contact us form template

This tailwind example is contributed by Lukas Müller, on 19-Jan-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 Lukas Müller

8.9k

Fork Fullscreen

<form
    class="relative border-8 border-neutral-900 p-6 rounded-lg grid gap-8 md:flex-1 md:max-w-lg my-4 md:my-12 lg:my-16 bg-white dark:bg-neutral-800 w-full">
    <h2 id="contact" class="text-3xl font-bold">Let's Connect</h2>
    <div class="relative">
        <input type="text" id="name" placeholder="Your Name"
            class="peer w-full py-2 border-4 border-amber-400 rounded-md focus:ring-4 dark:focus:ring-offset-2 focus:ring-amber-400 focus:border-amber-400 focus:outline-none dark:bg-amber-400 dark:text-neutral-900 placeholder-transparent">
        <label for="name"
            class="text-neutral-500 text-sm font-bold uppercase absolute -top-4 left-2 -translate-y-1/2 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-neutral-900 peer-focus:-top-4 peer-focus:left-2 peer-focus:text-neutral-600 dark:peer-focus:text-neutral-300 ">Your
            Name
        </label>
    </div>
    <div class="relative">
        <input type="text" id="email" placeholder="Your Email"
            class=" peer w-full py-2 border-4 border-amber-400 rounded-md focus:ring-4 dark:focus:ring-offset-2 focus:ring-amber-400 focus:border-amber-400 focus:outline-none dark:bg-amber-400 dark:text-neutral-900 placeholder-transparent">
        <label for="email"
            class=" text-neutral-500 text-sm font-bold uppercase absolute -top-4 left-2 -translate-y-1/2 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-neutral-900 peer-focus:-top-4 peer-focus:left-2 peer-focus:text-neutral-600 dark:peer-focus:text-neutral-300 ">Your
            Email
        </label>
    </div>
    <div class="relative">
        <textarea name="content" id="content" cols="20" rows="5" placeholder="How can we help?"
            class=" peer form-textarea resize-none w-full border-4 border-amber-400 rounded-md focus:ring-4 dark:focus:ring-offset-2 focus:ring-amber-400 focus:border-amber-400 focus:outline-none dark:bg-amber-400 dark:text-neutral-900 placeholder-transparent"></textarea>
        <label for="content"
            class=" text-neutral-500 text-sm font-bold uppercase absolute -top-3 left-2 -translate-y-1/2 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:top-6 peer-placeholder-shown:text-neutral-900 peer-focus:-top-4 peer-focus:left-2 peer-focus:text-neutral-600 dark:peer-focus:text-neutral-300 ">How
            can we help?
        </label>
    </div>
    <a href="#" role="menuitem"
        class=" py-2 px-6 bg-neutral-900 text-white w-max shadow-xl hover:shadow-none transition-shadow focus:outline-none focus-visible:ring-4 ring-neutral-900 rounded-md ring-offset-4 ring-offset-white dark:ring-offset-amber-400 ">
        Send
    </a>
</form>

Related Examples

Responsive contact us section

Author:
Geoffrey Callaghan

1 year ago

7.1k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

1 month ago

83
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

4 months ago

730
Sign up form

Author:
Rajesh Maheshwari

4 months ago

483
Responsive Registration Form with Tailwind CSS
A clean, mobile-friendly user registration form built using Tailwind CSS. It includes fields for full name, email, password, terms agreement, and styled components with hover and focus transitions.

Author:
Sudip chaudhary

1 month ago

186
Contact us page template
full page fancy contact us page

Author:
Lukas Müller

2 years ago

16.2k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

2 months ago

472
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

1.8k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

10 months ago

1.7k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

421
Text Rpg UI

Author:
Crimson

6 months ago

760
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components