Form by SmookyDev
#212121
HTML +TailwindCSS
1<div class="h-screen w-full"> 2 <div class="h-full w-full flex items-center justify-center"> 3 <div class="h-full w-full"> 4 <div 5 class="flex flex-col hover:blur-0 h-full bg-center bg-cover items-center justify-center w-full gap-5 bg-gradient-to-tr from-violet-700 to-violet-500" 6 > 7 <h1 class="my-6"> 8 <svg 9 viewBox="0 0 247 31" 10 class="w-auto h-7 sm:h-8 inline-flex text-white" 11 > 12 <path 13 fill="white" 14 fill-rule="evenodd" 15 clip-rule="evenodd" 16 d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" 17 ></path> 18 <path 19 fill="white" 20 fill-rule="evenodd" 21 clip-rule="evenodd" 22 d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" 23 ></path> 24 </svg> 25 </h1> 26 <ul class="inline-flex items-center text-xl gap-10"> 27 <li> 28 <svg 29 xmlns="http://www.w3.org/2000/svg" 30 class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white" 31 x="0px" 32 y="0px" 33 viewBox="0,0,256,256" 34 > 35 <g 36 fill="white" 37 fill-rule="nonzero" 38 stroke="none" 39 stroke-width="1" 40 stroke-linecap="butt" 41 stroke-linejoin="miter" 42 stroke-miterlimit="10" 43 stroke-dasharray="" 44 stroke-dashoffset="0" 45 font-family="none" 46 font-weight="none" 47 font-size="none" 48 text-anchor="none" 49 style="mix-blend-mode: normal" 50 > 51 <g transform="scale(8.53333,8.53333)"> 52 <path 53 d="M15.00391,3c-6.629,0 -12.00391,5.373 -12.00391,12c0,6.627 5.37491,12 12.00391,12c10.01,0 12.26517,-9.293 11.32617,-14h-1.33008h-2.26758h-7.73242v4h7.73828c-0.88958,3.44825 -4.01233,6 -7.73828,6c-4.418,0 -8,-3.582 -8,-8c0,-4.418 3.582,-8 8,-8c2.009,0 3.83914,0.74575 5.24414,1.96875l2.8418,-2.83984c-2.134,-1.944 -4.96903,-3.12891 -8.08203,-3.12891z" 54 ></path> 55 </g> 56 </g> 57 </svg> 58 </li> 59 <li> 60 <svg 61 xmlns="http://www.w3.org/2000/svg" 62 class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white" 63 x="0px" 64 y="0px" 65 viewBox="0,0,256,256" 66 > 67 <g 68 fill="white" 69 fill-rule="nonzero" 70 stroke="none" 71 stroke-width="1" 72 stroke-linecap="butt" 73 stroke-linejoin="miter" 74 stroke-miterlimit="10" 75 stroke-dasharray="" 76 stroke-dashoffset="0" 77 font-family="none" 78 font-weight="none" 79 font-size="none" 80 text-anchor="none" 81 style="mix-blend-mode: normal" 82 > 83 <g transform="scale(8.53333,8.53333)"> 84 <path 85 d="M15,3c-6.627,0 -12,5.373 -12,12c0,6.016 4.432,10.984 10.206,11.852v-8.672h-2.969v-3.154h2.969v-2.099c0,-3.475 1.693,-5 4.581,-5c1.383,0 2.115,0.103 2.461,0.149v2.753h-1.97c-1.226,0 -1.654,1.163 -1.654,2.473v1.724h3.593l-0.487,3.154h-3.106v8.697c5.857,-0.794 10.376,-5.802 10.376,-11.877c0,-6.627 -5.373,-12 -12,-12z" 86 ></path> 87 </g> 88 </g> 89 </svg> 90 </li> 91 <li> 92 <svg 93 xmlns="http://www.w3.org/2000/svg" 94 class="p-3 border-white text-violet-500 rounded-full border hover:scale-110 transition-all hover:bg-vifrom-violet-700 hover:text-white" 95 x="0px" 96 y="0px" 97 viewBox="0,0,256,256" 98 > 99 <g 100 fill="white" 101 fill-rule="nonzero" 102 stroke="none" 103 stroke-width="1" 104 stroke-linecap="butt" 105 stroke-linejoin="miter" 106 stroke-miterlimit="10" 107 stroke-dasharray="" 108 stroke-dashoffset="0" 109 font-family="none" 110 font-weight="none" 111 font-size="none" 112 text-anchor="none" 113 style="mix-blend-mode: normal" 114 > 115 <g transform="scale(8.53333,8.53333)"> 116 <path 117 d="M15,3c-6.627,0 -12,5.373 -12,12c0,5.623 3.872,10.328 9.092,11.63c-0.056,-0.162 -0.092,-0.35 -0.092,-0.583v-2.051c-0.487,0 -1.303,0 -1.508,0c-0.821,0 -1.551,-0.353 -1.905,-1.009c-0.393,-0.729 -0.461,-1.844 -1.435,-2.526c-0.289,-0.227 -0.069,-0.486 0.264,-0.451c0.615,0.174 1.125,0.596 1.605,1.222c0.478,0.627 0.703,0.769 1.596,0.769c0.433,0 1.081,-0.025 1.691,-0.121c0.328,-0.833 0.895,-1.6 1.588,-1.962c-3.996,-0.411 -5.903,-2.399 -5.903,-5.098c0,-1.162 0.495,-2.286 1.336,-3.233c-0.276,-0.94 -0.623,-2.857 0.106,-3.587c1.798,0 2.885,1.166 3.146,1.481c0.896,-0.307 1.88,-0.481 2.914,-0.481c1.036,0 2.024,0.174 2.922,0.483c0.258,-0.313 1.346,-1.483 3.148,-1.483c0.732,0.731 0.381,2.656 0.102,3.594c0.836,0.945 1.328,2.066 1.328,3.226c0,2.697 -1.904,4.684 -5.894,5.097c1.098,0.573 1.899,2.183 1.899,3.396v2.734c0,0.104 -0.023,0.179 -0.035,0.268c4.676,-1.639 8.035,-6.079 8.035,-11.315c0,-6.627 -5.373,-12 -12,-12z" 118 ></path> 119 </g> 120 </g> 121 </svg> 122 </li> 123 </ul> 124 <p class="text-white text-right">or use email your account</p> 125 <input 126 type="email" 127 name="" 128 id="" 129 class="bg-white/50 hover:bg-white md:bg-white placeholder:text-violet-500 placeholder:text-sm text-violet-500 py-3 px-5 focus:text-violet-500 focus:outline focus:outline-offset-1 focus:outline-violet-500 rounded-md" 130 placeholder="Enter Your Email Here!" 131 /> 132 <input 133 type="password" 134 name="" 135 id="" 136 class="bg-white/50 hover:bg-white md:bg-white placeholder:text-violet-500 placeholder:text-sm text-violet-500 py-3 px-5 focus:text-violet-500 focus:outline focus:outline-offset-1 focus:outline-violet-500 rounded-md" 137 placeholder="Enter Your Password Here!" 138 /> 139 <div class="text-right"> 140 <a 141 href="" 142 class="italic text-white/50 text-sm underline decoration-violet-500 text-violet-500 hover:text-white hover:text-violet-700 transition" 143 >Forget your Password?</a 144 > 145 </div> 146 <button 147 class="px-6 py-2 bg-violet-500 rounded hover:bg-white hover:text-violet-700 font-semibold transition-all text-white hover:scale-110" 148 > 149 Submit 150 </button> 151 </div> 152 </div> 153 </div> 154</div> 155
592 views
592 views
MIT License