<h1 class="bg-gray-600 text-white w-screen h-screen text-center items-center self-center justify-center flex">
  <div class="bg-white px-5 py-10 text-gray-800 rounded-xl bg-gray-200">
    <div class="text-3xl">
      Welcome to login form!
    </div>
    <form class="block">
      <div class="my-5">
        <input type="text" class="border-2 border-gray-200 p-5 text-2xl" placeholder="type a username">
      </div>
      <div class="my-5">
        <input type="password" class="border-2 border-gray-200 p-5 text-2xl" placeholder="type a password">
      </div>
      <div class="text-right">
        <button class="bg-gray-600 text-white p-4 rounded-full font-bold hover:bg-gray-400 hover:text-black">
          Login!
        </button>
      </div>
    </form>
  </div>
</h1> 

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.