<div class="min-h-screen flex items-center justify-center bg-blue-400">
  
<!--   login form -->
  <div class="bg-white p-16 rounded shadow-2x1 w-2/3">
    
    <h2 class="text-3xl font-bold mb-10 text-gray-800 ">Create Your Account</h2>
    
    <form class="space-y-5 ">
      <div>
        <label for="name" class="block mb-1 font-bold text-gray-500">Name</label>
        <input type="text" id="name" class="w-full border-2 border-gray-200 p-3 rounded outline-none focus:border-purple-500">
      </div>
      
      <div>
        <label for="email" class="block mb-1 font-bold text-gray-500">Email</label>
        <input type="email" id="name" class="w-full border-2 border-gray-200 p-3 rounded outline-none focus:border-purple-500">
      </div>
      
      <div>
        <label for="password" class="block mb-1 font-bold text-gray-500">Password</label>
        <input type="password" id="name" class="w-full border-2 border-gray-200 p-3 rounded outline-none focus:border-purple-500">
      </div>
      
      <div class="flex items-center">
        <input type="checkbox" id="agree">
        <label for="agree" class="ml-2 text-gray-700 text-sm">I agree to the terms and privacy</label>
      </div>
      
      <button class="block w-full bg-yellow-400 hover:bg-yellow-300 hover:text-purple-800 p-4 rounded text-purple-900 transition duration-300">Sign Up</button>
      
    </form>
       
  </div>
</div>

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.