Home
Arya
Book Appointment form

Book Appointment form

A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

This tailwind example is contributed by Arya, on 23-Aug-2022. Component is made with Tailwind CSS v3.

Form

Author Arya

12k

Fork Fullscreen

<div class="mx-14 mt-10 border-2 border-blue-400 rounded-lg">
  <div class="mt-10 text-center font-bold">Contact Us</div>
  <div class="mt-3 text-center text-4xl font-bold">Make an Appointment</div>
  <div class="p-8">
    <div class="flex gap-4">
      <input type="Name" name="name" class="mt-1 block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 placeholder-slate-400 shadow-sm placeholder:font-semibold placeholder:text-gray-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm" placeholder="Full Name *" />
      <input type="email" name="email" class="mt-1 block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 placeholder-slate-400 shadow-sm placeholder:font-semibold placeholder:text-gray-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm" placeholder="Email *" />
    </div>
    <div class="my-6 flex gap-4">
      <select name="select" id="select" class="block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 font-semibold text-gray-500 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
        <option  class="font-semibold text-slate-300">Please Select</option>
      </select>
      <select name="select" id="select" class="block w-1/2 rounded-md border border-slate-300 bg-white px-3 py-4 font-semibold text-gray-300 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm">
        <option  class="font-semibold text-slate-300">4:00 Available</option>
      </select>
    </div>
    <div class="">
      <textarea name="textarea" id="text" cols="30" rows="10" class="mb-10 h-40 w-full resize-none rounded-md border border-slate-300 p-5 font-semibold text-gray-300">Message</textarea>
    </div>
    <div class="text-center">
      <a class="cursor-pointer rounded-lg bg-blue-700 px-8 py-5 text-sm font-semibold text-white">Book Appoinment</a>
    </div>
  </div>
</div>

Related Examples

Book appointment form

Author:
Lukas Müller

2 years ago

27k
Form for editing items

Author:
Sophia Baker

2 years ago

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

Author:
Arya

3 years ago

13.7k
Appointment booking form

Author:
Leif99

2 years ago

17.5k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.2k
Simple Form 2

Author:
Mr Robot

3 years ago

10.3k
Reservation form

Author:
Lukas Müller

2 years ago

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

Author:
Geoffrey Callaghan

1 year ago

6.2k
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.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
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

5 months ago

759
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

14.6k
Contact me form

Author:
Arya

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components