<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>
This Pen doesn't use any external JavaScript resources.