<div class="p-8 rounded border border-gray-200">
    <h1 class="font-medium text-3xl">Add User</h1>
    <p class="text-gray-600 mt-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos dolorem vel cupiditate laudantium dicta.</p>

    <form>
      <div class="mt-8 grid lg:grid-cols-2 gap-4">
        <div>
          <label for="name" class="text-sm text-gray-700 block mb-1 font-medium">Name</label>
          <input type="text" name="name" id="name" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="Enter your name" />
        </div>

        <div>
          <label for="email" class="text-sm text-gray-700 block mb-1 font-medium">Email Adress</label>
          <input type="text" name="email" id="email" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="yourmail@provider.com" />
        </div>

        <div>
          <label for="job" class="text-sm text-gray-700 block mb-1 font-medium">Job title</label>
          <input type="text" name="job" id="job" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(ex. developer)" />
        </div>

        <div>
          <label for="brithday" class="text-sm text-gray-700 block mb-1 font-medium">Birthday</label>
          <input type="text" name="brithday" id="brithday" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(01/01/1993)" />
        </div>
      </div>

      <div class="space-x-4 mt-8">
        <button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50">Save</button>

        <!-- Secondary -->
        <button class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50">Cancel</button>
      </div>
    </form>
  </div>
                    
                

                    
                         <div class="p-8 rounded border border-gray-200">
    <h1 class="font-medium text-3xl">Add User</h1>
    <p class="text-gray-600 mt-6">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos dolorem vel cupiditate laudantium dicta.</p>

    <form>
      <div class="mt-8 space-y-6">
        <div>
          <label for="name" class="text-sm text-gray-700 block mb-1 font-medium">Name</label>
          <input type="text" name="name" id="name" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="Enter your name" />
        </div>

        <div>
          <label for="email" class="text-sm text-gray-700 block mb-1 font-medium">Email Adress</label>
          <input type="text" name="email" id="email" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="yourmail@provider.com" />
        </div>

        <div>
          <label for="job" class="text-sm text-gray-700 block mb-1 font-medium">Job title</label>
          <input type="text" name="job" id="job" class="bg-gray-100 border border-gray-200 rounded py-1 px-3 block focus:ring-blue-500 focus:border-blue-500 text-gray-700 w-full" placeholder="(ex. developer)" />
        </div>
      </div>

      <div class="space-x-4 mt-8">
        <button type="submit" class="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50">Save</button>

        <!-- Secondary -->
        <button class="py-2 px-4 bg-white border border-gray-200 text-gray-600 rounded hover:bg-gray-100 active:bg-gray-200 disabled:opacity-50">Cancel</button>
      </div>
    </form>
  </div>