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

11.6k

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

25.7k
Form for editing items

Author:
Sophia Baker

2 years ago

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

Author:
Arya

2 years ago

13.4k
Appointment booking form

Author:
Leif99

2 years ago

17k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.7k
Simple Form 2

Author:
Mr Robot

2 years ago

9.9k
Reservation form

Author:
Lukas Müller

2 years ago

12.8k
Simple login page template

Author:
Freja Jensen

2 years ago

12k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

2 months ago

369
Sign in form

Author:
Simon Scheffer

2 years ago

15.2k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

1.8k
Simple contact us form

Author:
Geoffrey Callaghan

1 year ago

6.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components