Forms 10

            
<div class="bg-gray-50 text-gray-600">
  <div class="py-6 lg:py-12 xl:py-32 p-8 lg:px-16 flex flex-col items-center justify-center mx-auto">
    <div class="bg-white p-6 lg:px-8 lg:pt-8 lg:pb-12 rounded-lg border border-gray-200 max-w-md w-full shadow">
      <div class="flex space-x-6 mb-4">
        <div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
        </div>
        <div>
          <h2 class="text-2xl text-gray-700 font-medium">Create user</h2>
          <p>Please enter the user details below</p>
        </div>
      </div>
      <form action="post" class="space-y-4">
        <label for="name" class="block">
          <span class="block font-semibold mb-2">Name</span>
          <input type="text" id="name" name="name" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="user name">
        </label>
        <label for="email" class="block">
          <span class="block font-semibold mb-2">Email</span>
          <input type="email" id="email" name="email" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="email address">
        </label>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <label for="job" class="block">
            <span class="block font-semibold mb-2">Job</span>
            <input type="text" id="job" name="job" class="bg-white w-full border border-gray-300 rounded-md py-3 px-3" placeholder="Job title">
          </label>
          <label for="salary" class="block">
            <span class="block font-semibold mb-2">Salary</span>
            <input type="text" id="salary" name="salary" class="bg-white w-full border border-gray-300 rounded-md py-3 px-3" placeholder="Salary">
          </label>
        </div>
        <label for="slogan" class="block">
          <span class="block font-semibold mb-2">Slogan</span>
          <input type="text" id="slogan" name="slogan" class="bg-white w-full border border-gray-300 rounded-md py-2 px-3" placeholder="slogan">
        </label>
        <div class="border-t border-gray-300 pt-4 flex items-center justify-center space-x-3">
          <a href="#" class="inline-block bg-white font-semibold rounded-lg py-4 px-5 lg:px-8 text-gray-600">Cancel</a>
          <a href="#" class="inline-block bg-gray-500 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white">Create user</a>
        </div>
      </form>
    </div>
  </div>
</div>