Form by themrsami
#e8e8e8
HTML +TailwindCSS
1<div class="h-96 flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"> 2 <div class="relative"> 3 <div class="absolute -top-2 -left-2 -right-2 -bottom-2 rounded-lg bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-lg animate-pulse"></div> 4 <div id="form-container" class="bg-white p-16 rounded-lg shadow-2xl w-80 relative z-10 transform transition duration-500 ease-in-out"> 5 <h2 id="form-title" class="text-center text-3xl font-bold mb-10 text-gray-800">Login</h2> 6 <form class="space-y-5"> 7 <input class="w-full h-12 border border-gray-800 px-3 rounded-lg" placeholder="Email" id="" name="" type="text"> 8 <input class="w-full h-12 border border-gray-800 px-3 rounded-lg" placeholder="Password" id="" name="" type="password"> 9 <button class="w-full h-12 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign in</button> 10 <a class="text-blue-500 hover:text-blue-800 text-sm" href="#">Forgot Password?</a> 11 </form> 12 </div> 13 </div> 14</div> 15
1.1K views
1.1K views
Variations
1 MIT License