<div class="flex h-full w-full items-center justify-center bg-slate-800">
  <div class="my-10 rounded-xl border border-gray-200 bg-white shadow-md">
    <a href="#"> </a>
    <div class="flex flex-col items-center justify-center p-6 text-center">
      <a href="#"> </a>

      <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 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-slate-800">
  <div class="my-10 rounded-xl border mx-5 border-gray-200 bg-white shadow-md">
    <a href="#"> </a>
    <div class="flex flex-col items-center justify-center p-6 text-center">
      <a href="#"> </a>

      <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">
        <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-gray-50 p-8 sm:p-12">
  <div class="w-full max-w-4xl rounded-md border-2 border-gray-100 bg-white p-14">
    <div class="flex flex-col items-center">
      <span class="-rotate-1 rounded-lg bg-yellow-100 py-px px-2 text-sm text-yellow-800">117+ people joined this week</span>
      <h3 class="mt-2 max-w-2xl text-center text-2xl font-bold leading-tight sm:text-3xl md:text-4xl md:leading-tight">Want actionable SEO advice from me? Then join this 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" id="email" class="grow rounded border-2 border-gray-300 py-3 px-3 focus:border-emerald-500 focus:outline-none sm:rounded-l-md sm:rounded-r-none sm:border-r-0" placeholder="Email Address" />
        <button type="submit" class="rounded bg-emerald-500 px-5 py-4 font-bold text-white sm:rounded-l-none sm:rounded-r-md">Get First Email</button>
      </form>
    </div>
  </div>
</div>