Form by mobinkakei
#e8e8e8
HTML +TailwindCSS
1<div 2 class="relative flex w-96 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md" 3> 4 <div 5 class="relative mx-4 -mt-6 mb-4 grid h-28 place-items-center overflow-hidden rounded-xl bg-gradient-to-tr from-cyan-600 to-cyan-400 bg-clip-border text-white shadow-lg shadow-cyan-500/40" 6 > 7 <h3 8 class="block font-sans text-3xl font-semibold leading-snug tracking-normal text-white antialiased" 9 > 10 Sign In 11 </h3> 12 </div> 13 <div class="flex flex-col gap-4 p-6"> 14 <div class="relative h-11 w-full min-w-[200px]"> 15 <input 16 placeholder="" 17 class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50" 18 /> 19 <label 20 class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500" 21 > 22 Email 23 </label> 24 </div> 25 <div class="relative h-11 w-full min-w-[200px]"> 26 <input 27 placeholder="" 28 class="peer h-full w-full rounded-md border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-3 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-cyan-500 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50" 29 /> 30 <label 31 class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-cyan-500 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-cyan-500 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-cyan-500 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500" 32 > 33 Password 34 </label> 35 </div> 36 <div class="-ml-2.5"> 37 <div class="inline-flex items-center"> 38 <label 39 data-ripple-dark="true" 40 for="checkbox" 41 class="relative flex cursor-pointer items-center rounded-full p-3" 42 > 43 <input 44 id="checkbox" 45 class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-cyan-500 checked:bg-cyan-500 checked:before:bg-cyan-500 hover:before:opacity-10" 46 type="checkbox" 47 /> 48 <span 49 class="pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100" 50 > 51 <svg 52 stroke-width="1" 53 stroke="currentColor" 54 fill="currentColor" 55 viewBox="0 0 20 20" 56 class="h-3.5 w-3.5" 57 xmlns="http://www.w3.org/2000/svg" 58 > 59 <path 60 clip-rule="evenodd" 61 d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 62 fill-rule="evenodd" 63 ></path> 64 </svg> 65 </span> 66 </label> 67 <label 68 for="checkbox" 69 class="mt-px cursor-pointer select-none font-light text-gray-700" 70 > 71 Remember Me 72 </label> 73 </div> 74 </div> 75 </div> 76 <div class="p-6 pt-0"> 77 <button 78 data-ripple-light="true" 79 type="button" 80 class="block w-full select-none rounded-lg bg-gradient-to-tr from-cyan-600 to-cyan-400 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-cyan-500/20 transition-all hover:shadow-lg hover:shadow-cyan-500/40 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" 81 > 82 Sign In 83 </button> 84 <p 85 class="mt-6 flex justify-center font-sans text-sm font-light leading-normal text-inherit antialiased" 86 > 87 Don't have an account? 88 <a 89 class="ml-1 block font-sans text-sm font-bold leading-normal text-cyan-500 antialiased" 90 href="#signup" 91 > 92 Sign up 93 </a> 94 </p> 95 </div> 96</div> 97
1.2K views
1.2K views
MIT License