پیشنمایش زنده
کد HTML
<section>
<div class="bg-white relative items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-20 max-w-7xl">
<div class="w-full max-w-md mx-auto md:max-w-sm md:px-0 md:w-96 sm:px-4">
<div class="flex flex-col">
<div>
<h2 class="text-4xl text-black">Reset password</h2>
</div>
</div>
<form>
<input value="https://jamstacker.studio/thankyou" type="hidden" name="_redirect">
<div class="mt-4 space-y-6">
<div class="col-span-full">
<label class="block mb-3 text-sm font-medium text-gray-600"> Password </label>
<input type="password" placeholder="******" class="block w-full px-6 py-3 text-black bg-white border border-gray-200 rounded-full appearance-none placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
</div>
<div class="col-span-full">
<label class="block mb-3 text-sm font-medium text-gray-600"> Confirm passord </label>
<input type="password" placeholder="******" class="block w-full px-6 py-3 text-black bg-white border border-gray-200 rounded-full appearance-none placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm">
</div>
<div class="col-span-full">
<button type="submit" class="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full nline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none focus-visible:outline-black text-sm focus-visible:ring-black"> Submit your request </button>
</div>
</div>
</form>
</div>
</div>
</section>
کد CSS
.relative{position:relative}.col-span-full{grid-column:1 / -1}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:0.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-center{text-align:center}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.placeholder\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}.focus-visible\:outline-black:focus-visible{outline-color:#000}.focus-visible\:ring-black:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}}@media (min-width: 768px){.md\:w-96{width:24rem}.md\:max-w-sm{max-width:24rem}.md\:px-0{padding-left:0px;padding-right:0px}.md\:px-12{padding-left:3rem;padding-right:3rem}}@media (min-width: 1024px){.lg\:px-20{padding-left:5rem;padding-right:5rem}}