Form by Manish-Tamang
#e8e8e8
HTML +TailwindCSS
1<div class="flex justify-center items-center min-h-screen"> 2 <div 3 class="max-w-sm w-full rounded-lg shadow-lg bg-white p-6 space-y-6 border border-gray-200 dark:border-gray-700" 4 > 5 <div class="space-y-2 text-center"> 6 <h1 class="text-3xl font-bold">Login</h1> 7 <p class="text-zinc-500 dark:text-zinc-400"> 8 By logging in, you accept our 9 <a class="text-blue-500 hover:text-blue-700" href="#">terms</a> 10 and 11 <a class="text-blue-500 hover:text-blue-700" href="#">privacy policy</a 12 >. 13 </p> 14 </div> 15 <div class="space-y-4"> 16 <div class="space-y-2"> 17 <label 18 class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 19 for="email" 20 >Email</label 21 > 22 <input 23 class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" 24 type="email" 25 id="email" 26 placeholder="[email protected]" 27 required="" 28 /> 29 </div> 30 <div class="flex items-center space-x-2"> 31 <hr class="flex-grow border-zinc-200 dark:border-zinc-700" /> 32 <span class="text-zinc-400 dark:text-zinc-300 text-sm">OR</span> 33 <hr class="flex-grow border-zinc-200 dark:border-zinc-700" /> 34 </div> 35 <button 36 class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-full bg-[#4285F4] text-white" 37 > 38 <div class="flex items-center justify-center"> 39 <svg 40 xmlns="http://www.w3.org/2000/svg" 41 width="24" 42 height="24" 43 viewBox="0 0 24 24" 44 fill="none" 45 stroke="currentColor" 46 stroke-width="2" 47 stroke-linecap="round" 48 stroke-linejoin="round" 49 class="w-5 h-5 mr-2" 50 > 51 <circle cx="12" cy="12" r="10"></circle> 52 <circle cx="12" cy="12" r="4"></circle> 53 <line x1="21.17" x2="12" y1="8" y2="8"></line> 54 <line x1="3.95" x2="8.54" y1="6.06" y2="14"></line> 55 <line x1="10.88" x2="15.46" y1="21.94" y2="14"></line> 56 </svg> 57 Login with Google 58 </div> 59 </button> 60 <button 61 class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-full bg-black text-white" 62 > 63 <div class="flex items-center justify-center"> 64 <svg 65 xmlns="http://www.w3.org/2000/svg" 66 width="24" 67 height="24" 68 viewBox="0 0 24 24" 69 fill="none" 70 stroke="currentColor" 71 stroke-width="2" 72 stroke-linecap="round" 73 stroke-linejoin="round" 74 class="w-5 h-5 mr-2" 75 > 76 <path 77 d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z" 78 ></path> 79 <path d="M10 2c1 .5 2 2 2 5"></path> 80 </svg> 81 Login with Apple 82 </div> 83 </button> 84 </div> 85 </div> 86</div> 87
102 views
102 views
MIT License