Form by Javierrocadev
#e8e8e8
HTML +TailwindCSS
1<div class="relative overflow-hidden w-64 h-80 rounded shadow flex flex-col justify-between p-3 after:absolute after:w-24 after:h-24 after:bg-sky-300 after:-z-10 after:rounded-full after:-top-4 after:-right-4 after:blur-xl border after:[box-shadow:-150px_50px_10px_100px_#7dd3fc]" id="login"> 2 <a class="border border-sky-500 bg-sky-50 hover:bg-sky-100 rounded text-sky-500 p-2 font-bold flex flex-row gap-3 justify-center" href="#"> 3 <span>Log in with</span> 4 <svg class="w-6 h-6 fill-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0"> 5 <path class="" d="M100,10.71V89.29A10.73,10.73,0,0,1,89.29,100H69.81V64.85H81.46L83.68,50.3H69.85V40.85c0-4,1.94-7.85,8.15-7.85h6.27V20.65a76.54,76.54,0,0,0-11.2-1c-11.42,0-18.88,7-18.88,19.57V50.3H41.49V64.85h12.7V100H10.71A10.73,10.73,0,0,1,0,89.29V10.71A10.73,10.73,0,0,1,10.71,0H89.29A10.73,10.73,0,0,1,100,10.71Z"> 6 </path> 7 </svg> 8 </a> 9 <span class="text-center text-sm font-bold text-sky-500 opacity-50">or</span> 10 <form method="post" action="" class="text-gray-700"> 11 <label for="email" class="text-xs font-bold after:content-['*']">Mail </label> 12 <input required="" type="email" class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500"> 13 <label for="password" class="text-xs font-bold after:content-['*']">Password </label> 14 <input required="" type="password" class="w-full p-2 mb-2 mt-1 outline-none ring-none focus:ring-2 focus:ring-sky-500"> 15 <a class="block text-right text-xs text-sky-500 text-right mb-4" href="#">Forgot Password?</a> 16 <button class="w-full rounded bg-sky-500 text-sky-50 p-2 text-center font-bold hover:bg-sky-400">Log In</button> 17 </form> 18</div>
524 views
Variation of aform
MIT License