{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":157,"projects":[{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"9ae48f","snapshot":null,"tags":null,"title":"form by AmIt-DasIT","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1215,"jsLen":0,"cssLen":2586,"pureCSS":1,"html":"

\n \n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.form {\n display: flex;\n justify-content: center;\n align-items: center;\n transform-style: preserve-3d;\n transition: all 1s ease;\n}\n\n.form .form_front {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .form_back {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n position: absolute;\n backface-visibility: hidden;\n transform: rotateY(-180deg);\n padding: 65px 45px;\n border-radius: 15px;\n box-shadow: inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form_details {\n font-size: 25px;\n font-weight: 600;\n padding-bottom: 10px;\n color: white;\n}\n\n.input {\n width: 245px;\n min-height: 45px;\n color: #fff;\n outline: none;\n transition: 0.35s;\n padding: 0px 7px;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n}\n\n.input::placeholder {\n color: #999;\n}\n\n.input:focus.input::placeholder {\n transition: 0.3s;\n opacity: 0;\n}\n\n.input:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn {\n padding: 10px 35px;\n cursor: pointer;\n background-color: #212121;\n border-radius: 6px;\n border: 2px solid #212121;\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6);\n color: #fff;\n font-size: 15px;\n font-weight: bold;\n transition: 0.35s;\n}\n\n.btn:hover {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.btn:focus {\n transform: scale(1.05);\n box-shadow: 6px 6px 10px rgba(0,0,0,1),\n 1px 1px 10px rgba(255, 255, 255, 0.6),\n inset 2px 2px 10px rgba(0,0,0,1),\n inset -1px -1px 5px rgba(255, 255, 255, 0.6);\n}\n\n.form .switch {\n font-size: 13px;\n color: white;\n}\n\n.form .switch .signup_tog {\n font-weight: 700;\n cursor: pointer;\n text-decoration: underline;\n}\n\n.container #signup_toggle {\n display: none;\n}\n\n.container #signup_toggle:checked + .form {\n transform: rotateY(-180deg);\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"b57285","snapshot":null,"tags":null,"title":"form by eslam-hany","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":253,"jsLen":0,"cssLen":1967,"pureCSS":1,"html":"","css":".form {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 50px 30px;\n background: #0b2447;\n border-radius: 10px;\n overflow: hidden;\n perspective: 1000px;\n transform-style: preserve-3d;\n transform: rotateX(-10deg);\n transition: all 0.3s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n animation: form-animation 0.5s ease-in-out;\n}\n\n@keyframes form-animation {\n from {\n transform: rotateX(-30deg);\n opacity: 0;\n }\n\n to {\n transform: rotateX(0deg);\n opacity: 1;\n }\n}\n\n.input {\n padding: 15px 10px;\n border-radius: 5px;\n margin-bottom: 10px;\n background-color: transparent;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n transform-style: preserve-3d;\n color: rgb(255, 255, 255);\n border: 2px solid #3b8df2;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\n.input::placeholder {\n color: #fff;\n}\n\n.input:hover,\n.input:focus {\n border-color: #3b8df2;\n background-color: transparent;\n transform: scale(1.05) rotateY(20deg);\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\n outline: none;\n}\n\nbutton {\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n background-color: transparent;\n color: #fff;\n font-size: 16px;\n cursor: pointer;\n transform-style: preserve-3d;\n backface-visibility: hidden;\n transform: rotateX(-10deg);\n transition: all 0.3s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n\nbutton:hover {\n background-color: #0077be;\n font-size: 17px;\n transform: scale(1.05) rotateY(20deg) rotateX(10deg);\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c0e05a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":3010,"jsLen":0,"cssLen":3522,"pureCSS":1,"html":"

Sign Up

\n","css":".mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.w-1\\/2{width:50%}.w-full{width:100%}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border-0{border-width:0px}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:bg-gray-600:focus{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c17a03","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":10033,"jsLen":0,"cssLen":5524,"pureCSS":1,"html":"

\n Date of Birth\n \n

\n Gender\n \n \n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sign up with Google\n \n \n \n \n \n Sign up with Apple\n \n

\n \n Sign up\n \n

\n \n have an account? Log in\n \n

\n\n","css":".relative {\n position: relative;\n}\n.mx-8 {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-5 {\n margin-top: 1.25rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n.w-1\\/5 {\n width: 20%;\n}\n.w-full {\n width: 100%;\n}\n.max-w-md {\n max-width: 28rem;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.rounded-3xl {\n border-radius: 1.5rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.border {\n border-width: 1px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity));\n}\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-20 {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.text-center {\n text-align: center;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),\n 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.focus\\:border-blue-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity));\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));\n}\n.focus\\:ring-offset-2:focus {\n --tw-ring-offset-width: 2px;\n}\n.focus\\:ring-offset-blue-200:focus {\n --tw-ring-offset-color: #bfdbfe;\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:border-gray-600 {\n --tw-border-opacity: 1;\n border-color: rgb(75 85 99 / var(--tw-border-opacity));\n }\n .dark\\:text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n }\n}\n@media (min-width: 640px) {\n .sm\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n .sm\\:max-w-xl {\n max-width: 36rem;\n }\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .sm\\:p-10 {\n padding: 2.5rem;\n }\n}\n@media (min-width: 768px) {\n .md\\:mx-0 {\n margin-left: 0px;\n margin-right: 0px;\n }\n .md\\:w-1\\/4 {\n width: 25%;\n }\n}\n"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"c5c347","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1872,"jsLen":0,"cssLen":1643,"pureCSS":1,"html":"

Registration Form

\n \n

","css":".container {\n position: relative;\n max-width: 500px;\n width: 100%;\n background: #FCEDDA;\n padding: 25px;\n border-radius: 8px;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n}\n\n.container header {\n font-size: 1.2rem;\n color: #000;\n font-weight: 600;\n text-align: center;\n}\n\n.container .form {\n margin-top: 15px;\n}\n\n.form .input-box {\n width: 100%;\n margin-top: 10px;\n}\n\n.input-box label {\n color: #000;\n}\n\n.form :where(.input-box input, .select-box) {\n position: relative;\n height: 35px;\n width: 100%;\n outline: none;\n font-size: 1rem;\n color: #808080;\n margin-top: 5px;\n border: 1px solid #EE4E34;\n border-radius: 6px;\n padding: 0 15px;\n background: #FCEDDA;\n}\n\n.input-box input:focus {\n box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n}\n\n.form .column {\n display: flex;\n column-gap: 15px;\n}\n\n.form .gender-box {\n margin-top: 10px;\n}\n\n.form :where(.gender-option, .gender) {\n display: flex;\n align-items: center;\n column-gap: 50px;\n flex-wrap: wrap;\n}\n\n.form .gender {\n column-gap: 5px;\n}\n\n.gender input {\n accent-color: #EE4E34;\n}\n\n.form :where(.gender input, .gender label) {\n cursor: pointer;\n}\n\n.gender label {\n color: #000;\n}\n\n.address :where(input, .select-box) {\n margin-top: 10px;\n}\n\n.select-box select {\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n color: #808080;\n font-size: 1rem;\n background: #FCEDDA;\n}\n\n.form button {\n height: 40px;\n width: 100%;\n color: #000;\n font-size: 1rem;\n font-weight: 400;\n margin-top: 15px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: #EE4E34;\n}\n\n.form button:hover {\n background: #EE3E34;\n}"},{"created":"2024-01-22T17:20:12.000Z","isPrivate":0,"projectId":"ef8e4b","snapshot":null,"tags":null,"title":"form by boryanakrasteva","updated":"2024-01-22T17:20:12.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":216,"jsLen":0,"cssLen":953,"pureCSS":1,"html":"","css":".form {\n width: 250px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n border-radius: 10px;\n padding: 20px 40px;\n background-color: rgba(245, 245, 245, 0.034);\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.192);\n transition: .2s linear;\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.form:hover {\n transform: scale(1.1);\n}\n\n.label {\n font-size: 14px;\n margin-bottom: -10.6px;\n}\n\n.input {\n height: 25px;\n width: 100%;\n border: 0.5px solid white;\n background-color: transparent;\n color: white;\n padding: 5px;\n border-radius: 5px;\n transition: .2s linear;\n position: relative;\n}\n\n.input:focus {\n outline: none;\n background-color: rgba(173, 173, 173, 0.233);\n box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.137);\n}\n\nbutton {\n border: none;\n padding: 4px 10px;\n border-radius: 5px;\n transition: .2s linear;\n}\n\nbutton:hover {\n background-color: rgba(255, 255, 255, 0.74);\n box-shadow: 2px 2px 10px rgba(124, 124, 124, 0.192);\n}\n"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"2fdc9a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1766,"jsLen":0,"cssLen":3406,"pureCSS":1,"html":"

Product Feedback Form

\n\n \n

\n","css":".mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-full {\n width: 100%\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-0 {\n border-width: 0px\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-indigo-500 {\n --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition {\n transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-150 {\n transition-duration: 150ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-indigo-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(79 70 229 / var(--tw-bg-opacity))\n}\n\n.hover\\:to-blue-600:hover {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.focus\\:bg-gray-200:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity))\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"326078","snapshot":null,"tags":null,"title":"form by ammarsaa","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":982,"jsLen":0,"cssLen":1988,"pureCSS":1,"html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 350px;\n padding: 20px;\n border-radius: 20px;\n position: relative;\n background-color: #1a1a1a;\n color: #fff;\n border: 1px solid #333;\n}\n\n.title {\n font-size: 28px;\n font-weight: 600;\n letter-spacing: -1px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 30px;\n color: #00bfff;\n}\n\n.title::before {\n width: 18px;\n height: 18px;\n}\n\n.title::after {\n width: 18px;\n height: 18px;\n animation: pulse 1s linear infinite;\n}\n\n.title::before,\n.title::after {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n border-radius: 50%;\n left: 0px;\n background-color: #00bfff;\n}\n\n.message, \n.signin {\n font-size: 14.5px;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.signin {\n text-align: center;\n}\n\n.signin a:hover {\n text-decoration: underline royalblue;\n}\n\n.signin a {\n color: #00bfff;\n}\n\n.flex {\n display: flex;\n width: 100%;\n gap: 6px;\n}\n\n.form label {\n position: relative;\n}\n\n.form label .input {\n background-color: #333;\n color: #fff;\n width: 100%;\n padding: 20px 05px 05px 10px;\n outline: 0;\n border: 1px solid rgba(105, 105, 105, 0.397);\n border-radius: 10px;\n}\n\n.form label .input + span {\n color: rgba(255, 255, 255, 0.5);\n position: absolute;\n left: 10px;\n top: 0px;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n}\n\n.form label .input:placeholder-shown + span {\n top: 12.5px;\n font-size: 0.9em;\n}\n\n.form label .input:focus + span,\n.form label .input:valid + span {\n color: #00bfff;\n top: 0px;\n font-size: 0.7em;\n font-weight: 600;\n}\n\n.input {\n font-size: medium;\n}\n\n.submit {\n border: none;\n outline: none;\n padding: 10px;\n border-radius: 10px;\n color: #fff;\n font-size: 16px;\n transform: .3s ease;\n background-color: #00bfff;\n}\n\n.submit:hover {\n background-color: #00bfff96;\n}\n\n@keyframes pulse {\n from {\n transform: scale(0.9);\n opacity: 1;\n }\n\n to {\n transform: scale(1.8);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"593817","snapshot":null,"tags":null,"title":"form by SmookyDev","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":10015,"jsLen":0,"cssLen":4011,"pureCSS":1,"html":"

\n \n

\n \n \n \n \n

\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n

or use email your account

\n \n \n

\n Forget your Password?\n

\n \n Submit\n \n

\n\n","css":".my-6{margin-top:1.5rem;margin-bottom:1.5rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-7{height:1.75rem}.h-full{height:100%}.h-screen{height:100vh}.w-auto{width:auto}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-10{gap:2.5rem}.gap-5{gap:1.25rem}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.bg-violet-500{--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.bg-white\\/50{background-color:rgb(255 255 255 / 0.5)}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-violet-700{--tw-gradient-from:#6d28d9 var(--tw-gradient-from-position);--tw-gradient-to:rgb(109 40 217 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-violet-500{--tw-gradient-to:#8b5cf6 var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:center}.p-3{padding:0.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-right{text-align:right}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.italic{font-style:italic}.text-violet-500{--tw-text-opacity:1;color:rgb(139 92 246 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-white\\/50{color:rgb(255 255 255 / 0.5)}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.decoration-violet-500{-webkit-text-decoration-color:#8b5cf6;text-decoration-color:#8b5cf6}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.placeholder\\:text-sm::placeholder{font-size:0.875rem;line-height:1.25rem}.placeholder\\:text-violet-500::placeholder{--tw-text-opacity:1;color:rgb(139 92 246 / var(--tw-text-opacity))}.hover\\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\\:text-violet-700:hover{--tw-text-opacity:1;color:rgb(109 40 217 / var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\\:blur-0:hover{--tw-blur:blur(0);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\\:text-violet-500:focus{--tw-text-opacity:1;color:rgb(139 92 246 / var(--tw-text-opacity))}.focus\\:outline:focus{outline-style:solid}.focus\\:outline-offset-1:focus{outline-offset:1px}.focus\\:outline-violet-500:focus{outline-color:#8b5cf6}@media (min-width: 640px){.sm\\:h-8{height:2rem}}@media (min-width: 768px){.md\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"a4a0b7","snapshot":null,"tags":null,"title":"form by KhelVers","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":259,"jsLen":0,"cssLen":1692,"pureCSS":1,"html":"","css":".form {\n height: 18em;\n width: 16em;\n padding: 4%;\n border-radius: 16px;\n background: #e8e8e8;\n box-shadow: 12px 12px 18px #bababa,\n -12px -12px 18px #ffffff;\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: space-evenly;\n}\n\n#login-lable {\n height: 15%;\n text-align: center;\n font-size: 34px;\n letter-spacing: 3px;\n font-weight: 600;\n text-shadow: -2px -2px 3px #ffffff ,\n 2px 2px 3px #bababa;\n position: relative;\n top: -14px;\n}\n\n.input {\n height: 16%;\n padding: 1px 8px;\n border: none;\n font-size: 1em;\n letter-spacing: 2px;\n border-radius: 8px;\n background: #f3f3f3;\n box-shadow: inset -2px -2px 4px #ffffff,\n inset 2px 2px 4px rgba(0, 0, 0, 0.356);\n text-decoration: none;\n background: linear-gradient(to right,white, #80808010, white);\n background-size: 200% 200%;\n animation: input 4s infinite;\n}\n\n.input:focus-visible {\n outline: none;\n background: rgb(241, 241, 241);\n}\n\n#btn {\n font-size: x-large;\n letter-spacing: 3px;\n color: white;\n font-weight: 700;\n height: 18%;\n background: linear-gradient(144deg,#af40ff,\n #5b42f3 50%,#00ddeb);\n border-radius: 8px;\n border: none;\n box-shadow: inset 1px 3px 3px #ffffffbd,\n inset -4px -4px 3px #00000046;\n background-size: 150% 150%;\n animation: input 5s infinite;\n transition: all 900ms ease-in;\n}\n\n#btn:hover {\n position: relative;\n bottom: 3px;\n background: linear-gradient(144deg,#9706ff,\n #2f0fff 50%,#18f0ff);\n}\n\n@keyframes input {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}\n "},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"a7a3d1","snapshot":null,"tags":null,"title":"form by Sr-Ajo","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":974,"jsLen":0,"cssLen":3345,"pureCSS":1,"html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-width: 350px;\n background-color: #355891;\n padding: 20px;\n border-radius: 10px;\n position: relative;\n}\n\n.message {\n color: #355891;\n font-size: 14px;\n}\n\n.flex {\n display: flex;\n width: 100%;\n gap: 6px;\n}\n\n.form label {\n position: relative;\n}\n\n.form label .input {\n width: 100%;\n padding: 10px 10px 20px 10px;\n outline: 0;\n border: 1px solid #355891;\n border-radius: 5px;\n}\n\n.form label .input + span {\n position: absolute;\n left: 10px;\n top: 15px;\n color: #355891;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n}\n\n.form label .input:placeholder-shown + span {\n top: 15px;\n font-size: 0.9em;\n}\n\n.form label .input:focus + span,.form label .input:valid + span {\n top: 30px;\n font-size: 0.7em;\n font-weight: 600;\n}\n\n.form label .input:valid + span {\n color: green;\n}\n\n.input01 {\n width: 100%;\n padding: 10px 10px 20px 10px;\n outline: 0;\n border: 1px solid #355891;\n border-radius: 5px;\n}\n\n.form label .input01 + span {\n position: absolute;\n left: 10px;\n top: 50px;\n color: #355891;\n font-size: 0.9em;\n cursor: text;\n transition: 0.3s ease;\n}\n\n.form label .input01:placeholder-shown + span {\n top: 40px;\n font-size: 0.9em;\n}\n\n.form label .input01:focus + span,.form label .input01:valid + span {\n top: 50px;\n font-size: 0.7em;\n font-weight: 600;\n}\n\n.form label .input01:valid + span {\n color: green;\n}\n\n.fancy {\n background-color: white;\n border: 2px solid #355891;\n border-radius: 0px;\n box-sizing: border-box;\n color: #355891;\n cursor: pointer;\n display: inline-block;\n font-weight: 390;\n letter-spacing: 2px;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 8px 30px;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-transform: none;\n transition: all 0.3s ease-in-out;\n user-select: none;\n font-size: 13px;\n}\n\n.fancy::before {\n content: \" \";\n width: 1.7rem;\n height: 2px;\n background: #355891;\n top: 50%;\n left: 1.5em;\n position: absolute;\n transform: translateY(-50%);\n transform: translateX(230%);\n transform-origin: center;\n transition: background 0.3s linear, width 0.3s linear;\n}\n\n.fancy .text {\n font-size: 1.125em;\n line-height: 1.33333em;\n padding-left: 2em;\n display: block;\n text-align: left;\n transition: all 0.3s ease-in-out;\n text-transform: lowercase;\n text-decoration: none;\n color: #355891;\n transform: translateX(30%);\n}\n\n.fancy .top-key {\n height: 2px;\n width: 1.5625rem;\n top: -2px;\n left: 0.625rem;\n position: absolute;\n background: #355891;\n transition: width 0.5s ease-out, left 0.3s ease-out;\n}\n\n.fancy .bottom-key-1 {\n height: 2px;\n width: 1.5625rem;\n right: 1.875rem;\n bottom: -2px;\n position: absolute;\n background: #355891;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy .bottom-key-2 {\n height: 2px;\n width: 0.625rem;\n right: 0.625rem;\n bottom: -2px;\n position: absolute;\n background: #355891;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy:hover {\n color: #355891;\n background: #5f82a9;\n}\n\n.fancy:hover::before {\n width: 1.5rem;\n background: #355891;\n}\n\n.fancy:hover .text {\n color: white;\n padding-left: 1.5em;\n}\n\n.fancy:hover .top-key {\n left: -2px;\n width: 0px;\n}\n\n.fancy:hover .bottom-key-1,\n .fancy:hover .bottom-key-2 {\n right: 0;\n width: 0;\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"aa8900","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1137,"jsLen":0,"cssLen":1859,"pureCSS":1,"html":"\n","css":".plan-chooser {\n background-color: rgba(255, 255, 255, 1);\n max-width: 320px;\n border-radius: 10px;\n padding: 20px;\n color: #000;\n box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);\n}\n\n.header {\n text-align: center;\n margin-top: 0.75rem;\n}\n\n.plan-chooser .title {\n font-size: 1.875rem;\n font-weight: 700;\n line-height: 1.25rem;\n color: rgba(0, 0, 0, 1);\n}\n\n.plan-chooser .desc {\n margin-top: 0.4rem;\n font-size: 1rem;\n line-height: 1.5rem;\n color: rgba(75, 85, 99, 1);\n}\n\n.plan-option {\n margin-top: 1rem;\n margin-bottom: 15px;\n}\n\n.plan-option label {\n cursor: pointer;\n overflow: hidden;\n border: 2px solid rgba(229, 231, 235, 1);\n border-radius: 0.375rem;\n background-color: rgba(249, 250, 251, 1);\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem .4rem;\n margin: 10px 0;\n transform: all .15s ease;\n}\n\n.plan-option label .plan-info {\n display: flex;\n flex-direction: column;\n margin-left: 10px;\n}\n\n.plan-cost {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n color: rgba(0, 0, 0, 1);\n}\n\n.plan-name {\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgba(75, 85, 99, 1);\n}\n\n.reduction {\n display: inline-block;\n border-radius: 9999px;\n border: 1px solid rgba(22, 163, 74, 1);\n background-color: rgba(220, 252, 231, 1);\n padding: 0.2rem .4rem;\n font-size: 0.675rem;\n line-height: 1.25rem;\n font-weight: 600;\n color: rgba(22, 163, 74, 1);\n}\n\n.plan-option input:checked + label {\n border-color: rgba(37, 99, 235, 1);\n}\n\n.choose-btn {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n background-color: rgba(37, 99, 235, 1);\n padding: 1rem 3rem;\n font-weight: 600;\n color: #fff;\n transform: all .15s ease;\n}\n\n.choose-btn:hover {\n opacity: .9;\n}\n\n.plan-option input {\n display: none;\n}"}]}},"actionData":null,"errors":null}