As someone in facebook posted 'Helps you connect and share with people using contact forms', we are helping you with best designed contact forms in tailwindCSS 🍽️
<div class="flex h-full w-full items-center justify-center bg-rose-300">
<div class="my-10 rounded-xl border border-gray-200 bg-white shadow-md">
<div class="flex flex-col items-center justify-center p-6 text-center">
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">
Contact Us
</h5>
<h1 class="mb-5 text-3xl font-bold">Book your Appointment</h1>
<div class="mx-10 grid justify-start">
<label
for="message"
class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900"
>Name *</label
>
<input
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
id="username"
type="text"
placeholder="Full Name *"
/>
<label
for="message"
class="left-0 mb-2 mt-2 -ml-28 block text-sm font-medium text-gray-900"
>Email address *</label
>
<input
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
id="username"
type="text"
placeholder="Email *"
/>
<label
for="message"
class="left-0 mb-2 mt-2 -ml-32 block text-sm font-medium text-gray-900"
>Depertment *</label
>
<select
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
aria-label="Default select example"
>
<option selected>Please Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label
for="message"
class="left-0 mb-2 mt-2 -ml-40 block text-sm font-medium text-gray-900"
>Time *</label
>
<select
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
aria-label="Default select example"
>
<option selected>4:00 Available</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<button
type="button"
class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Book Appointment
</button>
</div>
</div>
</div><div class="flex h-full w-full items-center justify-center bg-rose-300">
<div class="my-10 mx-5 rounded-xl border border-gray-200 bg-white shadow-md">
<div class="flex flex-col items-center justify-center p-6 text-center">
<h5 class="mb-1 px-4 font-bold tracking-tight text-gray-700">
Contact Us
</h5>
<h1 class="mb-5 text-3xl font-bold">Make an Appointment</h1>
<div class="mx-10 grid grid-cols-2 justify-start gap-3">
<input
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
id="username"
type="text"
placeholder="Full Name *"
/>
<input
class="focus:shadow-outline my-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
id="username"
type="text"
placeholder="Email *"
/>
<select
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
aria-label="Default select example"
>
<option selected>Please Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select
class="form-select my-3 block w-full appearance-none rounded border border-solid border-gray-300 bg-white bg-clip-padding bg-no-repeat px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none"
aria-label="Default select example"
>
<option selected>4:00 Available</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<label
for="message"
class="mb-2 mt-2 block text-sm font-medium text-gray-900 dark:text-gray-400"
>Your message</label
>
<textarea
id="message"
rows="4"
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
placeholder="Your message..."
></textarea>
<button
type="button"
class="mr-2 mb-2 mt-4 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Book Appointment
</button>
</div>
</div>
</div><div
class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-rose-300 p-8 sm:p-12"
>
<div
class="w-full max-w-4xl rounded-md border-2 border-gray-100 bg-gray-800 p-14 shadow-lg shadow-blue-300"
>
<div class="flex flex-col items-center">
<h3
class="mt-2 mb-4 max-w-2xl text-center text-2xl font-bold leading-tight text-white sm:text-3xl md:text-4xl md:leading-tight"
>
Subscribe for latest newsletter
</h3>
<form
action=""
class="mx-auto mt-4 flex w-full max-w-md flex-col gap-3 sm:flex-row sm:gap-0"
>
<input
type="email"
name="email"
class="grow rounded-lg border-2 border-gray-300 py-3 px-3 focus:border-red-500 focus:outline-none sm:rounded-l-md sm:rounded-r-none sm:border-r-0"
placeholder="Your Email"
/>
<button
type="submit"
class="rounded bg-blue-500 px-5 py-4 font-bold text-white sm:rounded-l-none sm:rounded-r-md"
>
Subscribe
</button>
</form>
</div>
</div>
</div><div class="flex min-h-screen items-center bg-sky-300">
<div class="mx-auto h-full max-w-4xl flex-1 rounded-lg bg-white shadow-xl">
<div class="flex flex-col md:flex-row">
<div class="h-32 md:h-auto md:w-1/2">
<img
class="h-full w-full object-cover"
src="https://img.freepik.com/free-photo/woman-sitting-near-businessman-holding-coffee-cup-using-calculator_23-2147880593.jpg?w=1060&t=st=1666609553~exp=1666610153~hmac=e7daf3c9f9a151cdf19028374cd444e1aa36ca5291bfd35efe3a86a42f9c7864"
alt="img"
/>
</div>
<div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
<div class="w-full">
<h1 class="mb-4 text-center text-2xl font-bold text-gray-700">
Book Appointment
</h1>
<div>
<label class="block text-lg"> Name </label>
<input
type="email"
class="w-full rounded-md border px-4 py-2 text-sm focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
placeholder="Enter your Full Name"
/>
</div>
<div>
<label class="mt-4 block text-lg"> Email </label>
<input
class="w-full rounded-md border px-4 py-2 text-sm focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
placeholder="example@gmail.com"
type="email"
/>
</div>
<div>
<label class="mt-4 block text-lg"> Department </label>
<select
class="w-full rounded-md border px-4 py-2 text-sm focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
name="Selectt"
>
<option selected>Select a department</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div>
<label class="mt-4 block text-lg"> Time </label>
<select
class="w-full rounded-md border px-4 py-2 text-sm focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
name="Selectt"
>
<option selected>Select Time</option>
<option>10:00 am</option>
<option>12:00 pm</option>
<option>3:00 pm</option>
<option>5:00 pm</option>
</select>
</div>
<button
class="focus:shadow-outline-blue mt-4 block w-full rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-center text-sm font-medium leading-5 text-white transition-colors duration-150 hover:bg-blue-700 focus:outline-none active:bg-blue-600"
href="#"
>
Book Appointment
</button>
</div>
</div>
</div>
</div>
</div>