forms Components

Circle Background Sign Up on Other Platforms

#form-009-circle-bg-sign-up-other-platform

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply relative max-w-screen-sm flex items-center justify-center w-full py-10; } .img { @apply absolute top-0 left-0 w-full h-full opacity-40; } .bg { @apply absolute top-0 left-0 w-full h-full bg-blue-100 opacity-70; } .sign-up-content { @apply max-w-lg w-full relative z-10 rounded-sm shadow-lg overflow-hidden; } .top-content { @apply py-10 bg-white px-16; } .spy-ten { @apply space-y-10; } .title { @apply text-center text-black text-xl; } .spy-five { @apply space-y-5; } .input-content { @apply flex space-x-3 items-center; } .svg { @apply fill-amber-500; } .input { @apply py-2 px-5 rounded-full w-full flex-1 bg-slate-100; } .agree-content { @apply flex items-center space-x-2 pl-3; } .agree-dot { @apply w-1 h-1 bg-amber-500 rounded-full; } .agree-title { @apply text-black text-xs; } .height-light { @apply text-amber-500; } .btn-content { @apply flex space-x-5 justify-center items-center; } .btn { @apply px-10 py-3 rounded-full bg-amber-500 text-white text-sm cursor-pointer; } .login-title { @apply text-sm text-black; } .bottom-content { @apply py-16 px-5 bg-amber-500 relative; } .or-icon { @apply absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 bg-white flex justify-center items-center text-amber-500 rounded-full text-sm shadow-[0px_0px_2px_0_rgb(0_0_0/0.8)]; } .platforms-title { @apply text-white text-center; } .platforms-content { @apply flex space-x-5 justify-center; } .platforms-circle { @apply rounded-full bg-white overflow-hidden flex justify-center items-center w-8 h-8; } .platforms-svg { @apply w-5 h-5 fill-amber-500; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <img src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="img"> <div class="bg"></div> <div class="sign-up-content"> <div class="top-content"> <div class="spy-ten"> <p class="title">Sign Up</p> <div class="spy-five"> <div class="input-content"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="svg"> <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /> </svg> <input type="text" class="input" placeholder="USERNAME"> </div> <div class="input-content"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="svg"> <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /> </svg> <input type="text" class="input" placeholder="E-MAIL"> </div> <div class="input-content"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="svg"> <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /> </svg> <input type="text" class="input" placeholder="PASSWORD"> </div> </div> <div class="agree-content"> <div class="agree-dot"></div> <p class="agree-title">I agree to the <span class="height-light">Terms of Service</span> and <span class="height-light">Privacy Policy</span>.</p> </div> <div class="btn-content"> <button class="btn">SIGN UP</button> <p class="login-title">Already Have account ? <span class="height-light">Login</span></p> </div> </div> </div> <div class="bottom-content"> <div class="or-icon">OR</div> <div class="spy-five"> <p class="platforms-title">Sign up with social platforms</p> <div class="platforms-content"> <div class="platforms-circle"> <svg class="platforms-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-337 273 123.5 256" xml:space="preserve"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="M-260.9,327.8c0-10.3,9.2-14,19.5-14c10.3,0,21.3,3.2,21.3,3.2l6.6-39.2c0,0-14-4.8-47.4-4.8c-20.5,0-32.4,7.8-41.1,19.3 c-8.2,10.9-8.5,28.4-8.5,39.7v25.7H-337V396h26.5v133h49.6V396h39.3l2.9-38.3h-42.2V327.8z"> </path> </g> </svg> </div> <div class="platforms-circle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="platforms-svg"> <path d="M453.2 112L523.8 112L369.6 288.2L551 528L409 528L297.7 382.6L170.5 528L99.8 528L264.7 339.5L90.8 112L236.4 112L336.9 244.9L453.2 112zM428.4 485.8L467.5 485.8L215.1 152L173.1 152L428.4 485.8z" /> </svg> </div> <div class="platforms-circle"> <svg xmlns="http://www.w3.org/2000/svg" class="platforms-svg" viewBox="0 0 640 640"> <path d="M386.3 292.5C388.1 302.2 389.4 311.9 389.4 324.5C389.4 434.3 315.8 512 205 512C98.9 512 13 426.1 13 320C13 213.9 98.9 128 205 128C256.9 128 300.1 146.9 333.6 178.3L281.5 228.3C267.4 214.7 242.5 198.7 205 198.7C139.5 198.7 86.1 252.9 86.1 320C86.1 387.1 139.5 441.3 205 441.3C281 441.3 309.5 386.6 314 358.5L205 358.5L205 292.5L386.3 292.5L386.3 292.5zM571.7 298.9L571.7 243.2L515.7 243.2L515.7 298.9L460 298.9L460 354.9L515.7 354.9L515.7 410.6L571.7 410.6L571.7 354.9L627.4 354.9L627.4 298.9L571.7 298.9z" /> </svg> </div> <div class="platforms-circle"> <svg xmlns="http://www.w3.org/2000/svg" class="platforms-svg" viewBox="0 0 640 640"> <path d="M196.3 512L103.4 512L103.4 212.9L196.3 212.9L196.3 512zM149.8 172.1C120.1 172.1 96 147.5 96 117.8C96 103.5 101.7 89.9 111.8 79.8C121.9 69.7 135.6 64 149.8 64C164 64 177.7 69.7 187.8 79.8C197.9 89.9 203.6 103.6 203.6 117.8C203.6 147.5 179.5 172.1 149.8 172.1zM543.9 512L451.2 512L451.2 366.4C451.2 331.7 450.5 287.2 402.9 287.2C354.6 287.2 347.2 324.9 347.2 363.9L347.2 512L254.4 512L254.4 212.9L343.5 212.9L343.5 253.7L344.8 253.7C357.2 230.2 387.5 205.4 432.7 205.4C526.7 205.4 544 267.3 544 347.7L544 512L543.9 512z" /> </svg> </div> </div> </div> </div> </div> </div> </body> </html>

Credit Card Form

#form-005-credit-card

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style> .card.flipped { transform: rotateY(180deg); } </style> <style type="text/tailwindcss"> .content { @apply flex space-x-5 max-w-screen-lg w-full mx-auto items-center; } .card-content { @apply cursor-pointer aspect-[750/471] max-w-md w-full; } .card { @apply transform-3d relative w-full h-full transition-all duration-750; } .front-card { @apply w-full h-full rounded-2xl absolute top-0 left-0 backface-hidden; } .back-card { @apply w-full h-full rounded-2xl absolute top-0 left-0 backface-hidden rotate-y-180; } .form-content { @apply bg-white rounded-xl flex-1 space-y-4 p-5; } .spy-one { @apply space-y-1; } .title { @apply text-gray-500 text-sm; } .input { @apply w-full border rounded p-2 dark:outline-black border-black; } .two-card-content { @apply flex space-x-4; } .expiration { @apply flex-1 space-y-1; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <div class="card-content" onclick="flipCard()"> <div class="card"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471" class="front-card"> <defs> <linearGradient id="card-bg" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#1e3c72" /> <stop offset="100%" stop-color="#2a5298" /> </linearGradient> <linearGradient id="chip-bg" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#d4af37" /> <stop offset="100%" stop-color="#f1e27c" /> </linearGradient> </defs> <g id="Front"> <rect x="0" y="0" width="750" height="471" rx="40" ry="40" fill="url(#card-bg)" /> <rect x="80" y="70" width="100" height="70" rx="10" ry="10" fill="url(#chip-bg)" stroke="#b8860b" stroke-width="2" /> <circle cx="130" cy="105" r="20" fill="none" stroke="#8b7500" stroke-width="2" /> <line x1="80" y1="90" x2="110" y2="90" stroke="#8b7500" stroke-width="2" /> <line x1="150" y1="90" x2="180" y2="90" stroke="#8b7500" stroke-width="2" /> <line x1="80" y1="120" x2="110" y2="120" stroke="#8b7500" stroke-width="2" /> <line x1="150" y1="120" x2="180" y2="120" stroke="#8b7500" stroke-width="2" /> <text x="60" y="280" font-family="monospace" font-size="32" fill="#fff" letter-spacing="3" class="svg-number">#### #### #### ####</text> <text x="60" y="240" font-size="14" fill="#cfd8dc">CARD NUMBER</text> <text x="60" y="420" font-family="sans-serif" font-size="22" fill="#fff" font-weight="bold" class="svg-name">NAME SURNAME</text> <text x="60" y="390" font-size="14" fill="#cfd8dc">CARDHOLDER NAME</text> <text x="480" y="390" font-size="14" fill="#cfd8dc">VALID THRU</text> <text class="svg-expire" x="580" y="420" font-family="sans-serif" font-size="22" fill="#fff">MM/YY</text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 471" class="back-card"> <rect x="0" y="0" width="750" height="471" rx="40" ry="40" fill="url(#card-bg)" /> <rect x="0" y="60" width="750" height="60" fill="#111" /> <rect x="50" y="180" width="650" height="50" fill="#fff" /> <text x="60" y="210" font-size="18" font-family="sans-serif" fill="#111">AUTHORIZED SIGNATURE</text> <rect x="600" y="180" width="100" height="50" fill="#ccc" /> <text class="svg-cvc" x="610" y="210" font-size="18" font-family="monospace" fill="#111">###</text> <text x="50" y="400" font-size="12" font-family="sans-serif" fill="#ddd"> This card is property of Bank Demo. If found, please return. </text> </svg> </div> </div> <form class="form-content"> <div class="spy-one"> <label class="title">Name</label> <input class="input-name input" /> </div> <div class="spy-one"> <label class="title">Card Number</label> <input maxlength="19" class="input-number input" placeholder="#### #### #### ####" /> </div> <div class="two-card-content"> <div class="expiration"> <label class="title">Expiration (mm/yy)</label> <input maxlength="4" class="input-expire input" placeholder="MM/YY" inputmode="numeric" /> </div> <div class="spy-one"> <label class="title"> Security Code</label> <input maxlength="3" class="input-cvc input" placeholder="###" /> </div> </div> </form> </div> <script> function flipCard() { document.querySelector(".card").classList.toggle("flipped"); } const numberInput = document.querySelector(".input-number"); const nameInput = document.querySelector(".input-name"); const expireInput = document.querySelector(".input-expire"); const cvcInput = document.querySelector(".input-cvc"); numberInput.addEventListener("input", e => { let value = e.target.value.replace(/D/g, "").substring(0, 16); value = value.replace(/(.{4})/g, "$1 ").trim(); document.querySelector(".svg-number").textContent = value || "#### #### #### ####"; }); nameInput.addEventListener("input", e => { document.querySelector(".svg-name").textContent = e.target.value.toUpperCase() || "NAME SURNAME"; }); expireInput.addEventListener("input", e => { let value = e.target.value.replace(/D/g, "").substring(0, 4); if (value.length > 2) value = value.substring(0, 2) + "/" + value.substring(2); document.querySelector(".svg-expire").textContent = value || "MM/YY"; }); let cardFlipped = false; cvcInput.addEventListener("focus", () => { if (!cardFlipped) { document.querySelector(".card").classList.add("flipped"); cardFlipped = true; } }); cvcInput.addEventListener("input", e => { document.querySelector(".svg-cvc").textContent = e.target.value || "###"; }); cvcInput.addEventListener("blur", () => { if (cardFlipped) { document.querySelector(".card").classList.remove("flipped"); cardFlipped = false; } }); </script> </body> </html>

Email Login

#form-006-email-login

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-screen-md w-full bg-sky-200 p-7 rounded-3xl relative; } .outline-bg { @apply bg-sky-600 rounded-2xl; } .form-content { @apply max-w-md w-full px-7 py-12 space-y-5 mx-auto; } .spy25 { @apply space-y-2.5; } .title { @apply text-center text-white text-3xl font-bold; } .description { @apply text-sm text-white text-center; } .form { @apply border-2 border-white rounded-full overflow-hidden relative; } .input { @apply text-white w-full pl-7 pr-16 py-3 text-xl bg-gradient-to-r from-cyan-400 to-cyan-500 placeholder:text-white outline-white outline-1; } .button { @apply absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 bg-white rounded-full p-2 flex justify-center items-center cursor-pointer; } .svg { @apply fill-cyan-500 w-6 h-6; } .image-content { @apply flex space-x-5 absolute -bottom-[30px] left-1/2 -translate-x-1/2; } .img-outline { @apply p-1 bg-amber-400 rounded-full; } .img { @apply aspect-square w-15 rounded-full object-cover; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <div class="outline-bg"> <div class="form-content"> <div class="spy25"> <p class="title">Already part of the team?</p> <p class="description">Sign in to keep collaborating seamlessly.</p> </div> <form submit="" class="form"> <input type="text" placeholder="youremail@address.com"class="input"> <button type="submit" class="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="svg"> <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" /> </svg> </button> </form> </div> </div> <div class="image-content"> <div class="img-outline"> <img src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img" alt=""> </div> <div class="img-outline"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img" alt=""> </div> <div class="img-outline"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img" alt=""> </div> <div class="img-outline"> <img src="https://images.unsplash.com/photo-1619895862022-09114b41f16f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img" alt=""> </div> <div class="img-outline"> <img src="https://plus.unsplash.com/premium_photo-1689565611422-b2156cc65e47?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"class="img" alt=""> </div> </div> </div> </body> </html>

Floating Label Login Form

#form-003-floating-label

Focus Icon Fill Effect

#form-001-forcus-icon-fill

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .bg { @apply w-full h-full absolute top-0 left-0; } .bg-opacity { @apply absolute top-0 left-0 w-full h-full bg-amber-500/30; } .form { @apply max-w-80 w-full relative; } .top-content { @apply bg-white p-5 divide-y; } .title { @apply text-black font-bold pb-2.5; } .top-space { @apply space-y-5 pt-3; } .form-content { @apply flex flex-row-reverse overflow-hidden; } .input-style { @apply w-full flex-1 border border-black/30 focus:border-amber-500 px-1 py-1 focus:outline-none; } .icon-content { @apply bg-amber-500 w-0 h-[34px] peer-focus:w-9 transition-all duration-300 overflow-hidden; } .icon { @apply w-full h-full fill-white p-2; } .link { @apply block w-max text-amber-500 text-xs; } .btn { @apply p-5 bg-amber-500 flex justify-center items-center text-white cursor-pointer w-full; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <img src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="bg" alt=""> <div class="bg-opacity"></div> <form class="form"> <div class="top-content"> <p class="title">Log in</p> <div class="top-space"> <div class="form-content"> <input type="text" class="peer input-style" placeholder="email"> <div class="icon-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="icon"> <path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z" /> </svg> </div> </div> <div class="form-content"> <input type="password" class="peer input-style" placeholder="password"> <div class="icon-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="icon"> <path d="M420-680q0-33 23.5-56.5T500-760q33 0 56.5 23.5T580-680q0 33-23.5 56.5T500-600q-33 0-56.5-23.5T420-680ZM500 0 320-180l60-80-60-80 60-85v-47q-54-32-87-86.5T260-680q0-100 70-170t170-70q100 0 170 70t70 170q0 67-33 121.5T620-472v352L500 0ZM340-680q0 56 34 98.5t86 56.5v125l-41 58 61 82-55 71 75 75 40-40v-371q52-14 86-56.5t34-98.5q0-66-47-113t-113-47q-66 0-113 47t-47 113Z" /> </svg> </div> </div> <a href="" class="link">Forgot your password?</a> </div> </div> <button type="button" class="btn"> <p>Log in</p> </button> </form> </body> </html>

Icon Border Radius Left Login

#form-010-icon-border-radius-left-login

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-sm w-full rounded-3xl overflow-hidden shadow-xl; } .top-content { @apply flex justify-center items-center py-16 px-5 bg-black; } .svg { @apply fill-white w-14 h-14; } .bottom-content { @apply bg-gradient-to-b from-black to-white rounded-b-3xl overflow-hidden; } .login-content { @apply bg-slate-100 rounded-tl-[60px] py-10 px-7 space-y-10; } .title { @apply text-4xl text-center text-black; } .spy-five { @apply space-y-5; } .input-content { @apply rounded-lg bg-white px-5 py-3 space-y-1; } .input-title { @apply font-bold text-black; } .input { @apply w-full outline-none text-black; } .btn { @apply p-3 bg-black text-white w-full rounded-lg cursor-pointer; } .sign-up { @apply mt-28 text-center text-black font-bold text-sm; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <div class="top-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="svg"> <path d="M320 80C377.4 80 424 126.6 424 184C424 241.4 377.4 288 320 288C262.6 288 216 241.4 216 184C216 126.6 262.6 80 320 80zM96 152C135.8 152 168 184.2 168 224C168 263.8 135.8 296 96 296C56.2 296 24 263.8 24 224C24 184.2 56.2 152 96 152zM0 480C0 409.3 57.3 352 128 352C140.8 352 153.2 353.9 164.9 357.4C132 394.2 112 442.8 112 496L112 512C112 523.4 114.4 534.2 118.7 544L32 544C14.3 544 0 529.7 0 512L0 480zM521.3 544C525.6 534.2 528 523.4 528 512L528 496C528 442.8 508 394.2 475.1 357.4C486.8 353.9 499.2 352 512 352C582.7 352 640 409.3 640 480L640 512C640 529.7 625.7 544 608 544L521.3 544zM472 224C472 184.2 504.2 152 544 152C583.8 152 616 184.2 616 224C616 263.8 583.8 296 544 296C504.2 296 472 263.8 472 224zM160 496C160 407.6 231.6 336 320 336C408.4 336 480 407.6 480 496L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 496z" /> </svg> </div> <div class="bottom-content"> <div class="login-content"> <p class="title">Login</p> <div class="spy-five"> <div class="input-content"> <p class="input-title">Email</p> <input type="text" class="input" placeholder="test@example"> </div> <div class="input-content"> <p class="input-title">Password</p> <input type="password" class="input" placeholder="⬤ ⬤ ⬤ ⬤ ⬤ ⬤"> </div> <button class="btn">Login</button> </div> <p class="sign-up">Don't have any account? Sign Up</p> </div> </div> </div> </body> </html>

Modern Contact Form

#form-contact

Preserve 3D Form

#form-002-preserve3d

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-96 relative w-full; } .bg { @apply absolute top-0 left-0 w-full h-full opacity-90 object-cover; } .bg-opacity { @apply absolute top-0 left-0 w-full h-full bg-slate-800/60; } .form-content { @apply relative p-10; } .input { @apply hidden; } .sign-in-label { @apply inline-block text-[22px] mr-[15px] mb-2.5 pb-[5px] border-b-2 border-transparent peer-checked/signin:text-white peer-checked/signin:border-amber-500 text-gray-300 cursor-pointer; } .sign-up-label { @apply inline-block text-[22px] mr-[15px] mb-2.5 pb-[5px] border-b-2 border-transparent peer-checked/signup:text-white peer-checked/signup:border-amber-500 text-gray-300 cursor-pointer; } .form-preserve { @apply relative min-h-[550px] perspective-normal transform-3d; } .sign-in-form { @apply absolute p-10 top-20 left-0 w-full transition-all duration-500 backface-hidden peer-checked/signin:rotate-y-0 rotate-y-180 space-y-4; } .title { @apply block text-xs text-gray-300; } .form-input { @apply w-full px-5 py-3 rounded-full bg-white/20 text-white border-none outline-none; } .check-content { @apply flex items-center; } .check-box { @apply w-[15px] h-[15px] mr-2 rounded-sm bg-white/20 relative before:content-['✓'] before:opacity-0 peer-checked/check:before:opacity-100 before:text-white before:text-xs before:absolute before:top-1/2 before:-translate-y-1/2 before:left-1/2 before:-translate-x-1/2 transition-all duration-300; } .check-label { @apply flex items-center text-sm text-gray-300 peer-checked/check:text-white cursor-pointer transition-all duration-300; } .btn { @apply w-full px-5 py-3 rounded-full bg-amber-500 text-white font-semibold cursor-pointer; } .border-line { @apply h-0.5 my-12 bg-white/20; } .a-center { @apply text-center; } .link { @apply text-sm text-gray-300 transition-all duration-300; } .link:hover { @apply text-white; } .sign-up-form { @apply absolute p-10 top-20 left-0 w-full transition-all duration-500 backface-hidden peer-checked/signup:rotate-y-0 rotate-y-180 space-y-4; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <img src="https://images.unsplash.com/photo-1510265236892-329bfd7de7a1?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="bg" alt=""> <div class="bg-opacity"></div> <div class="form-content"> <input id="tab-1" type="radio" name="tab" class="input peer/signin" checked> <label for="tab-1" class="sign-in-label"> Sign In </label> <input id="tab-2" type="radio" name="tab" class="input peer/signup"> <label for="tab-2" class="sign-up-label"> Sign Up </label> <div class="form-preserve"></div> <div class="sign-in-form "> <div> <label for="user" class="title">Username</label> <input id="user" type="text" class=" form-input"> </div> <div> <label for="pass" class="title">Password</label> <input id="pass" type="password" class="form-input"> </div> <div class="check-content"> <input id="check" type="checkbox" class="input peer/check"> <div class="check-box"></div> <label for="check" class="check-label">Keep me Signed in</label> </div> <button type="submit" class="btn">Sign In</button> <div class="border-line"></div> <div class="a-center"> <a href="#forgot" class="link">Forgot Password?</a> </div> </div> <div class="sign-up-form"> <div> <label for="user-signup" class="title">Username</label> <input id="user-signup" type="text" class="form-input"> </div> <div> <label for="pass-signup" class="title">Password</label> <input id="pass-signup" type="password" class="form-input"> </div> <div> <label for="repeat-pass" class="title">Repeat Password</label> <input id="repeat-pass" type="password" class="form-input"> </div> <div> <label for="email" class="title">Email Address</label> <input id="email" type="text" class="form-input"> </div> <button type="submit" class="btn">Sign Up</button> <div class="border-line"></div> <div class="text-center"> <label for="tab-1" class="link">Already Member?</label> </div> </div> </div> </div> </body> </html>

Rise Fill Button

#form-007-hospital-reserve

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-md w-full space-y-5; } .spy-one { @apply space-y-1; } .title { @apply font-bold text-lg; } .input-content { @apply border-t-2 border-b-4 border-x-2 border-slate-200 px-4 py-2.5 flex rounded-full; } .input-title { @apply w-full text-xl; } .svg { @apply w-7 h-7 bg-gray-200 rounded-full flex justify-center items-center; } .two-content { @apply flex space-x-5; } .two-spy-one { @apply space-y-1 w-full; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <div class="spy-one"> <p class="title">🤵Category</p> <div class="input-content"> <p class="input-title">🐶Pets</p> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"> <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" /> </svg> </div> </div> </div> <div class="two-content"> <div class="two-spy-one"> <p class="title">📅Date</p> <div class="input-content"> <p class="input-title">10/11/21</p> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"> <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" /> </svg> </div> </div> </div> <div class="two-spy-one"> <p class="title">⌚Time</p> <div class="input-content"> <p class="input-title">6:00 pm</p> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"> <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" /> </svg> </div> </div> </div> </div> <div class="spy-one"> <p class="title">🔔Reminders</p> <div class="input-content"> <p class="input-title">At time of event</p> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"> <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" /> </svg> </div> </div> </div> <div class="spy-one"> <p class="title">🔁Repeat</p> <div class="input-content"> <p class="input-title">None</p> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"> <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" /> </svg> </div> </div> </div> </div> </body> </html>

Subscribe with Visa

#form-008-subscribe-visa

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <style type="text/tailwindcss"> .content { @apply max-w-md w-full space-y-5 p-10 rounded-lg shadow-lg bg-white; } .title { @apply text-2xl text-black; } .pay-way-content { @apply flex rounded-md overflow-hidden; } .monthly { @apply text-white px-5 py-2 bg-emerald-400 text-center w-full; } .one-time { @apply border-y border-r border-slate-400 px-5 py-2 text-slate-400 text-center w-full rounded-r-md; } .money-content { @apply flex space-x-3; } .money-box-select { @apply border-2 border-emerald-400 bg-emerald-400 text-white p-2 rounded-md w-14 text-center h-full; } .money-box { @apply border-2 border-emerald-400 text-slate-400 p-2 rounded-md w-14 text-center; } .show-money { @apply flex-1 w-full px-4 py-2 bg-slate-100 text-center rounded-md text-black; } .info-content { @apply rounded-md overflow-hidden divide-y divide-slate-300; } .info-input-content { @apply flex bg-slate-100; } .info-title { @apply py-2.5 px-3 text-black/40 max-w-17 w-full; } .input { @apply w-full flex-1 py-2.5 px-3 text-black; } .visa-content { @apply flex rounded-md bg-slate-100 overflow-hidden space-x-2 items-center px-3; } .svg { @apply w-5 h-5 fill-emerald-700; } .card-number { @apply p-3 outline-none text-black; } .card-input { @apply py-3 w-12 outline-none text-right text-black; } .btn { @apply uppercase text-white py-2 px-3 bg-emerald-500 rounded-md w-full; } </style> <body class="min-h-svh flex items-center justify-center w-full"> <div class="content"> <p class="title">A little support, a lot of music.</p> <div class="pay-way-content"> <div class="monthly">Monthly</div> <div class="one-time">One-time</div> </div> <div class="money-content"> <div class="money-content"> <div class="money-box-select">$3</div> <div class="money-box">$5</div> <div class="money-box">$10</div> </div> <div class="show-money">$3</div> </div> <div class="info-content"> <div class="info-input-content"> <div class="info-title">Name</div> <input type="text" class="input" value="Jason"> </div> <div class="info-input-content"> <div class="info-title">Email</div> <input type="text" class="input" value="Jason@example.com"> </div> </div> <div class="visa-content"> <svg xmlns="http://www.w3.org/2000/svg" class="svg" viewBox="0 0 640 640"> <path d="M502.1 295.3C502.1 295.3 509.7 332.5 511.4 340.3L478 340.3C481.3 331.4 494 296.8 494 296.8C493.8 297.1 497.3 287.7 499.3 281.9L502.1 295.3zM608 144L608 496C608 522.5 586.5 544 560 544L80 544C53.5 544 32 522.5 32 496L32 144C32 117.5 53.5 96 80 96L560 96C586.5 96 608 117.5 608 144zM184.5 395.2L247.7 240L205.2 240L165.9 346L161.6 324.5L147.6 253.1C145.3 243.2 138.2 240.4 129.4 240L64.7 240L64 243.1C79.8 247.1 93.9 252.9 106.2 260.2L142 395.2L184.5 395.2zM278.9 395.4L304.1 240L263.9 240L238.8 395.4L278.9 395.4zM418.8 344.6C419 326.9 408.2 313.4 385.1 302.3C371 295.2 362.4 290.4 362.4 283.1C362.6 276.5 369.7 269.7 385.5 269.7C398.6 269.4 408.2 272.5 415.4 275.6L419 277.3L424.5 243.7C416.6 240.6 404 237.1 388.5 237.1C348.8 237.1 320.9 258.3 320.7 288.5C320.4 310.8 340.7 323.2 355.9 330.7C371.4 338.3 376.7 343.3 376.7 350C376.5 360.4 364.1 365.2 352.6 365.2C336.6 365.2 328 362.7 314.9 356.9L309.6 354.4L304 389.3C313.4 393.6 330.8 397.4 348.8 397.6C391 397.7 418.5 376.8 418.8 344.6zM560 395.4L527.6 240L496.5 240C486.9 240 479.6 242.8 475.5 252.9L415.8 395.4L458 395.4C458 395.4 464.9 376.2 466.4 372.1L518 372.1C519.2 377.6 522.8 395.4 522.8 395.4L560 395.4z" /> </svg> <input type="text" value="1234 4567 7890 1234" class="card-number"> <input type="text" value="12/21" class="card-input"> <input type="text" value="631" class="card-input"> </div> <button type="submit" class="btn">subscribe for $3</button> </div> </body> </html>

Z-Index Form

#form-004-zindex-form

Forms