{"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:17.000Z","isPrivate":0,"projectId":"0aa57b","snapshot":null,"tags":null,"title":"form by adamgiebl","updated":"2024-01-22T17:20:17.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":2388,"jsLen":0,"cssLen":1879,"pureCSS":1,"html":"\n","css":".form {\n --input-focus: #e74c3c;\n --font-color: #fff;\n --font-color-sub: #ccc;\n --bg-color: #2c3e50;\n --main-color: #e74c3c;\n padding: 20px;\n background: #34495e;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 20px;\n border-radius: 10px;\n height: 1000px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.title {\n color: var(--font-color);\n font-weight: 900;\n font-size: 24px;\n margin-bottom: 25px;\n}\n\n.title span {\n color: var(--font-color-sub);\n font-weight: 600;\n font-size: 18px;\n}\n\n.input {\n width: 300px;\n height: 45px;\n border-radius: 10px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 16px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.login-with {\n display: flex;\n gap: 20px;\n}\n\n.button-log {\n cursor: pointer;\n width: 45px;\n height: 45px;\n border-radius: 100%;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n color: var(--font-color);\n font-size: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.icon {\n width: 24px;\n height: 24px;\n fill: var(--main-color);\n}\n\n.button-log:active,\n.button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.button-confirm {\n margin: 50px auto 0 auto;\n width: 140px;\n height: 45px;\n border-radius: 10px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 18px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n}"},{"created":"2024-01-22T17:20:17.000Z","isPrivate":0,"projectId":"6b4f4c","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:17.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":2108,"jsLen":0,"cssLen":1234,"pureCSS":1,"html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 300px;\n background-color: #fff;\n border-radius: 20px;\n padding: 30px 20px;\n box-shadow: 100px 100px 80px rgba(0, 0, 0, 0.03)\n}\n\n.title {\n color: black;\n font-weight: bold;\n text-align: center;\n font-size: 20px;\n margin-bottom: 4px;\n}\n\n.sub {\n text-align: center;\n color: black;\n font-size: 14px;\n width: 100%;\n}\n\n.sub.mb {\n margin-bottom: 1px;\n}\n\n.sub a {\n color: rgb(23, 111, 211);\n}\n\n.avatar {\n height: 50px;\n width: 50px;\n background-color: rgb(23, 111, 211);\n border-radius: 50%;\n align-self: center;\n padding: 6px;\n cursor: pointer;\n box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03);\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.input, button {\n border: none;\n outline: none;\n width: 100%;\n padding: 16px 10px;\n background-color: rgb(247, 243, 243);\n border-radius: 10px;\n box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.015),100px 100px 80px rgba(0, 0, 0, 0.03);\n}\n\nbutton {\n margin-top: 12px;\n background-color: rgb(23, 111, 211);\n color: #fff;\n text-transform: uppercase;\n font-weight: bold;\n}\n\n.input:focus {\n border: 1px solid rgb(23, 111, 211);\n}\n\n#file {\n display: none;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"209219","snapshot":null,"tags":null,"title":"form by zanina-yassine","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":5681,"jsLen":0,"cssLen":4173,"pureCSS":1,"html":"

\n Comments\n

\n \n

\n 14\n

\n \n

\n Yassine Zanina\n

Wednesday, March 13th at 2:45pm

\n I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to\n use, and the features are exactly what I need to streamline my workflow.\n

\n\n

\n \n

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

","css":".card {\n width: 450px;\n height: fit-content;\n background-color: white;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 17px 17px 27px 27px;\n}\n\n.title {\n width: 100%;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n padding-left: 20px;\n border-bottom: 1px solid #f1f1f1;\n font-weight: 700;\n font-size: 13px;\n color: #47484b;\n}\n\n.title::after {\n content: '';\n width: 8ch;\n height: 1px;\n position: absolute;\n bottom: -1px;\n background-color: #47484b;\n}\n\n.comments {\n display: grid;\n grid-template-columns: 35px 1fr;\n gap: 20px;\n padding: 20px;\n}\n\n.comment-react {\n width: 35px;\n height: fit-content;\n display: grid;\n grid-template-columns: auto;\n margin: 0;\n background-color: #f1f1f1;\n border-radius: 5px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: '';\n width: 40px;\n height: 40px;\n position: absolute;\n left: -2.5px;\n top: -2.5px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 13px;\n font-weight: 600;\n color: #707277;\n}\n\n.comment-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 0;\n margin: 0;\n}\n\n.comment-container .user {\n display: grid;\n grid-template-columns: 40px 1fr;\n gap: 10px;\n}\n\n.comment-container .user .user-pic {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f1f1f1;\n border-radius: 50%;\n}\n\n.comment-container .user .user-pic:after {\n content: '';\n width: 9px;\n height: 9px;\n position: absolute;\n right: 0px;\n bottom: 0px;\n border-radius: 50%;\n background-color: #0fc45a;\n border: 2px solid #ffffff;\n}\n\n.comment-container .user .user-info {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 3px;\n}\n\n.comment-container .user .user-info span {\n font-weight: 700;\n font-size: 12px;\n color: #47484b;\n}\n\n.comment-container .user .user-info p {\n font-weight: 600;\n font-size: 10px;\n color: #acaeb4;\n}\n\n.comment-container .comment-content {\n font-size: 12px;\n line-height: 16px;\n font-weight: 600;\n color: #5f6064;\n}\n\n.text-box {\n width: 100%;\n height: fit-content;\n background-color: #f1f1f1;\n padding: 8px;\n}\n\n.text-box .box-container {\n background-color: #ffffff;\n border-radius: 8px 8px 21px 21px;\n padding: 8px;\n}\n\n.text-box textarea {\n width: 100%;\n height: 40px;\n resize: none;\n border: 0;\n border-radius: 6px;\n padding: 12px 12px 10px 12px;\n font-size: 13px;\n outline: none;\n caret-color: #0a84ff;\n}\n\n.text-box .formatting {\n display: grid;\n grid-template-columns: auto auto auto auto auto 1fr;\n}\n\n.text-box .formatting button {\n width: 30px;\n height: 30px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border-radius: 50%;\n border: 0;\n outline: none;\n}\n\n.text-box .formatting button:hover {\n background-color: #f1f1f1;\n}\n\n.text-box .formatting .send {\n width: 30px;\n height: 30px;\n background-color: #0a84ff;\n margin: 0 0 0 auto;\n}\n\n.text-box .formatting .send:hover {\n background-color: #026eda;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"295237","snapshot":null,"tags":null,"title":"form by KhelVers","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":8727,"jsLen":0,"cssLen":2098,"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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n","css":"#Container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n}\n\n#rays {\n z-index: 2;\n position: relative;\n bottom: -1.5em;\n animation: rays 2s ease-in-out infinite;\n}\n\n.form {\n position: relative;\n top: 5em;\n padding: 4%;\n z-index: 3;\n display: flex;\n flex-direction: column;\n border-radius: 0.5rem;\n border: 4px solid #fff;\n background: rgba(0, 255, 240, 0.52);\n box-shadow: 0px 0px 64px 0px #82e1ff inset, 0px 0px 16px #a8fffaa6;\n backdrop-filter: blur(3.5px);\n gap: 1em;\n animation: float 2s ease-in-out infinite;\n}\n\n#login-lable {\n text-align: center;\n color: white;\n font-size: 2rem;\n font-weight: 600;\n letter-spacing: 8px;\n text-shadow: 0px 0px 16px rgb(243, 243, 243);\n}\n\n.form-content {\n height: 3em;\n padding: 1px 8px;\n color: white;\n text-decoration: none;\n letter-spacing: 1px;\n font-weight: bold;\n border-radius: 6px;\n border: 2px solid #fff;\n background: rgba(139, 255, 247, 0.486);\n box-shadow: 0px 0px 1px 3px #9ee5e3 inset, 0px 4px 4px 0px #181a6040;\n text-shadow: 0px 1px 4px rgb(243, 243, 243);\n}\n\n.form-content:focus-visible {\n outline: none;\n text-decoration: none;\n background: rgba(139, 189, 255, 0.59);\n box-shadow: 0px 0px 1px 4px #9ee5e3;\n}\n\n.form-content:hover {\n background: rgba(139, 189, 255, 0.59);\n}\n\n::placeholder {\n font-weight: 300;\n color: white;\n letter-spacing: 0.1rem;\n text-shadow: 0px 1px 5px rgb(66, 66, 66);\n}\n\n.form button {\n cursor: pointer;\n height: 3.5rem;\n padding: 0%;\n color: white;\n font-size: 1.5em;\n letter-spacing: 0.3rem;\n border: 2px solid white;\n background: linear-gradient(144deg, #9c11ffce, #2000eeb6 50%, #15efffbb);\n}\n\n.form button:hover {\n position: relative;\n bottom: 4px;\n background: linear-gradient(144deg, #9c11ff, #2000ee 50%, #15fff3);\n box-shadow: 0px 0px 2px 2px #ffffff;\n}\n\n@keyframes float {\n 0% {\n position: relative;\n }\n\n 50% {\n top: 50px;\n }\n\n 100% {\n position: relative;\n }\n}\n\n@keyframes rays {\n 0% {\n opacity: 0.6;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.6;\n }\n}\n"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"4f8f0e","snapshot":null,"tags":null,"title":"form by SmookyDev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":3014,"jsLen":0,"cssLen":5877,"pureCSS":1,"html":"\n \n Welcome\n

\n\n

Create Your Account

\n \n

\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.right-0 {\n right: 0px;\n}\n.z-\\[100\\] {\n z-index: 100;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-3 {\n height: 0.75rem;\n}\n.w-3 {\n width: 0.75rem;\n}\n.w-\\[300px\\] {\n width: 300px;\n}\n.w-full {\n width: 100%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-\\[46\\%\\] {\n --tw-translate-x: 46%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-rotate-90 {\n --tw-rotate: -90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.snap-start {\n scroll-snap-align: start;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-5 {\n gap: 1.25rem;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-\\[5px\\] {\n border-radius: 5px;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-b-2 {\n border-bottom-width: 2px;\n}\n.border-\\[\\#7F3D27\\] {\n --tw-border-opacity: 1;\n border-color: rgb(127 61 39 / var(--tw-border-opacity));\n}\n.bg-\\[\\#7F3D27\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(127 61 39 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#D9D9D9\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(217 217 217 / var(--tw-bg-opacity));\n}\n.bg-\\[\\#DFA16A\\] {\n --tw-bg-opacity: 1;\n background-color: rgb(223 161 106 / var(--tw-bg-opacity));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-px {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.pb-5 {\n padding-bottom: 1.25rem;\n}\n.pl-0 {\n padding-left: 0px;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\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.capitalize {\n text-transform: capitalize;\n}\n.tracking-\\[20px\\] {\n letter-spacing: 20px;\n}\n.text-\\[\\#7F3D27\\] {\n --tw-text-opacity: 1;\n color: rgb(127 61 39 / var(--tw-text-opacity));\n}\n.text-\\[\\#A15A3E\\] {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.text-\\[\\#D9D9D9\\] {\n --tw-text-opacity: 1;\n color: rgb(217 217 217 / var(--tw-text-opacity));\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px 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-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px 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-\\[\\#7F3D27\\] {\n --tw-shadow-color: #7f3d27;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.placeholder\\:text-xs::placeholder {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.placeholder\\:text-\\[\\#A15A3E\\]::placeholder {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:text-\\[\\#A15A3E\\]:checked {\n --tw-text-opacity: 1;\n color: rgb(161 90 62 / var(--tw-text-opacity));\n}\n.checked\\:accent-\\[\\#A15A3E\\]:checked {\n accent-color: #a15a3e;\n}\n.hover\\:translate-x-\\[50\\%\\]:hover {\n --tw-translate-x: 50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:scale-110:focus {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.focus\\:border-0:focus {\n border-width: 0px;\n}\n.focus\\:accent-\\[\\#7F3D27\\]:focus {\n accent-color: #7f3d27;\n}\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.focus\\:ring-0: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(0px + 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"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"75ae76","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1303,"jsLen":0,"cssLen":1514,"pureCSS":1,"html":"

Feedback Form

Name

\n \n

Email*

\n \n

What is your overall impression?*

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

	Very Satisfied	Satisfied	Unsatisfied	Very Unsatisfied
Professional

Feel free to add any other comments or suggestions:

\n \n

","css":"form, p {\n padding: 0;\n margin: 0;\n outline: none;\n font-family: Roboto, Arial, sans-serif;\n font-size: 14px;\n color: #000;\n line-height: 13px;\n border-radius: 10px;\n}\n\n#h1 {\n font-size: 24px;\n font-weight: 400;\n text-align: center;\n}\n\n#h4 {\n margin: 20px 0 2px;\n color: #000;\n}\n\n.testbox {\n display: flex;\n justify-content: center;\n align-items: center;\n height: inherit;\n padding: 80px;\n}\n\nform {\n width: 100%;\n padding: 20px;\n background: #EBEBE1;\n box-shadow: 0 2px 5px #ccc;\n}\n\n.input {\n width: calc(100% - 10px);\n padding: 5px;\n border: 1px solid #000;\n border-radius: 3px;\n vertical-align: middle;\n background-color: #F7F7F7;\n}\n\n.input:hover, textarea:hover {\n outline: none;\n border: 1px solid #000;\n}\n\n.first-name {\n margin-bottom: 5px;\n}\n\nth, td {\n width: 21%;\n padding: 15px 0;\n border-bottom: 1px solid #ccc;\n text-align: center;\n vertical-align: set;\n line-height: 18px;\n font-weight: 400;\n word-break: break-all;\n}\n\n.first-col {\n width: 16%;\n text-align: left;\n}\n\ntable {\n width: 100%;\n}\n\ntextarea {\n width: calc(100% - 6px);\n background: #F7F7F7;\n border-radius: 5px;\n}\n\n.btn-block {\n margin-top: 20px;\n text-align: center;\n}\n\nbutton {\n width: 150px;\n padding: 10px;\n border: none;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n background-color: #F3D153;\n font-size: 16px;\n color: #000;\n cursor: pointer;\n}\n\nbutton:hover {\n opacity: .9;\n}\n\n@media (min-width: 568px) {\n th, td {\n word-break: keep-all;\n }\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"7fb175","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1453,"jsLen":0,"cssLen":3704,"pureCSS":1,"html":"

\n \n \n \n \n

\n \n

","css":".wrapper {\n --input-focus: #2d8cf0;\n --font-color: #fefefe;\n --font-color-sub: #7e7e7e;\n --bg-color: #111;\n --bg-color-alt: #7e7e7e;\n --main-color: #fefefe;\n /* display: flex; */\n /* flex-direction: column; */\n /* align-items: center; */\n}\n/* switch card */\n.switch {\n transform: translateY(-200px);\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n width: 50px;\n height: 20px;\n}\n\n.card-side::before {\n position: absolute;\n content: 'Log in';\n left: -70px;\n top: 0;\n width: 100px;\n text-decoration: underline;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.card-side::after {\n position: absolute;\n content: 'Sign up';\n left: 70px;\n top: 0;\n width: 100px;\n text-decoration: none;\n color: var(--font-color);\n font-weight: 600;\n}\n\n.toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n box-sizing: border-box;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--bg-color);\n transition: 0.3s;\n}\n\n.slider:before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n height: 20px;\n width: 20px;\n border: 2px solid var(--main-color);\n border-radius: 5px;\n left: -2px;\n bottom: 2px;\n background-color: var(--bg-color);\n box-shadow: 0 3px 0 var(--main-color);\n transition: 0.3s;\n}\n\n.toggle:checked + .slider {\n background-color: var(--input-focus);\n}\n\n.toggle:checked + .slider:before {\n transform: translateX(30px);\n}\n\n.toggle:checked ~ .card-side:before {\n text-decoration: none;\n}\n\n.toggle:checked ~ .card-side:after {\n text-decoration: underline;\n}\n\n/* card */ \n\n.flip-card__inner {\n width: 300px;\n height: 350px;\n position: relative;\n background-color: transparent;\n perspective: 1000px;\n /* width: 100%;\n height: 100%; */\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.toggle:checked ~ .flip-card__inner {\n transform: rotateY(180deg);\n}\n\n.toggle:checked ~ .flip-card__front {\n box-shadow: none;\n}\n\n.flip-card__front, .flip-card__back {\n padding: 20px;\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n background: var(--bg-color);\n gap: 20px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.flip-card__back {\n width: 100%;\n transform: rotateY(180deg);\n}\n\n.flip-card__form {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.title {\n margin: 20px 0 20px 0;\n font-size: 25px;\n font-weight: 900;\n text-align: center;\n color: var(--main-color);\n}\n\n.flip-card__input {\n width: 250px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 15px;\n font-weight: 600;\n color: var(--font-color);\n padding: 5px 10px;\n outline: none;\n}\n\n.flip-card__input::placeholder {\n color: var(--font-color-sub);\n opacity: 0.8;\n}\n\n.flip-card__input:focus {\n border: 2px solid var(--input-focus);\n}\n\n.flip-card__btn:active, .button-confirm:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}\n\n.flip-card__btn {\n margin: 20px 0 20px 0;\n width: 120px;\n height: 40px;\n border-radius: 5px;\n border: 2px solid var(--main-color);\n background-color: var(--bg-color);\n box-shadow: 4px 4px var(--main-color);\n font-size: 17px;\n font-weight: 600;\n color: var(--font-color);\n cursor: pointer;\n} "},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"857c6a","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1418,"jsLen":0,"cssLen":3900,"pureCSS":1,"html":"

Login

\n \n

\n","css":".mb-0 {\n margin-bottom: 0px\n}\n\n.mb-0\\.5 {\n margin-bottom: 0.125rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mr-2 {\n margin-right: 0.5rem\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.cursor-pointer {\n cursor: pointer\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.flex-wrap {\n flex-wrap: wrap\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.justify-between {\n justify-content: space-between\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.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / 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.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\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:16.000Z","isPrivate":0,"projectId":"895b4e","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":838,"jsLen":0,"cssLen":5002,"pureCSS":1,"html":"\n \n","css":".form {\n position: relative;\n display: block;\n padding: 2.2rem;\n max-width: 350px;\n background: linear-gradient(14deg, rgba(2,0,36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%, \n rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2,0,36, 0.5) 0%, \n rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);\n border: 2px solid #fff;\n -webkit-box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n box-shadow: rgba(0,212,255) 0px 0px 50px -15px;\n overflow: hidden;\n z-index: +1;\n}\n\n/*------input and submit section-------*/\n\n.input-container {\n position: relative;\n}\n\n.input-container input, .form button {\n outline: none;\n border: 2px solid #ffffff;\n margin: 8px 0;\n font-family: monospace;\n}\n\n.input-container input {\n background-color: #fff;\n padding: 6px;\n font-size: 0.875rem;\n line-height: 1.25rem;\n width: 250px;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.input-mail:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.input-pwd:focus::placeholder {\n opacity: 0;\n transition: opacity .9s;\n}\n\n.submit {\n position: relative;\n display: block;\n padding: 8px;\n background-color: #c0c0c0;\n color: #ffffff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n width: 100%;\n text-transform: uppercase;\n overflow: hidden;\n}\n\n.submit:hover {\n -webkit-transition: all 0.2s ease-out;\n -moz-transition: all 0.2s ease-out;\n transition: all 0.2s ease-out;\n border-radius: 3.9px;\n box-shadow: 4px 5px 17px -4px #ffffff;\n cursor: pointer;\n}\n\n.submit:hover::before {\n -webkit-animation: sh02 0.5s 0s linear;\n -moz-animation: sh02 0.5s 0s linear;\n animation: sh02 .5s 0s linear;\n}\n\n.submit::before {\n content: '';\n display: block;\n width: 0px;\n height: 85%;\n position: absolute;\n top: 50%;\n left: 0%;\n opacity: 0;\n background: #fff;\n box-shadow: 0 0 50px 30px #fff;\n -webkit-transform: skewX(-20deg);\n -moz-transform: skewX(-20deg);\n -ms-transform: skewX(-20deg);\n -o-transform: skewX(-20deg);\n transform: skewX(-20deg);\n}\n\n@keyframes sh02 {\n from {\n opacity: 0;\n left: 0%;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n left: 100%;\n }\n}\n\n/*--------signup section---------*/\n\n.signup-link {\n color: #c0c0c0;\n font-size: 0.875rem;\n line-height: 1.25rem;\n text-align: center;\n font-family: monospace;\n}\n\n.signup-link a {\n color: #fff;\n text-decoration: none;\n}\n\n.up:hover {\n text-decoration: underline;\n}\n\n\n/*--------header section-----------*/\n\n.form-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-family: monospace;\n font-weight: 600;\n text-align: center;\n color: #fff;\n text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);\n animation-duration: 1.5s;\n overflow: hidden;\n transition: .12s;\n}\n\n.form-title span {\n animation: flickering 2s linear infinite both;\n}\n\n.title-2 {\n display: block;\n margin-top: -0.5rem;\n font-size: 2.1rem;\n font-weight: 800;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n -webkit-text-stroke: #fff 0.1rem;\n letter-spacing: 0.2rem;\n color: transparent;\n position: relative;\n text-shadow: 0px 0px 16px #CECECE;\n}\n\n.title-2 span::before,\n.title-2 span::after {\n content: '—';\n}\n\n@keyframes flickering {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 41.99% {\n opacity: 1;\n }\n\n 42% {\n opacity: 0;\n }\n\n 43% {\n opacity: 0;\n }\n\n 43.01% {\n opacity: 1;\n }\n\n 47.99% {\n opacity: 1;\n }\n\n 48% {\n opacity: 0;\n }\n\n 49% {\n opacity: 0;\n }\n\n 49.01% {\n opacity: 1;\n }\n}\n\n/*---------shooting stars-----------*/\n\n\n.bg-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n background-size: cover;\n animation: animateBg 50s linear infinite;\n}\n\n@keyframes animateBg {\n 0%,100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.2);\n }\n}\n\n.star {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 4px;\n height: 4px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);\n animation: animate 3s linear infinite;\n}\n\n.star::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 300px;\n height: 1px;\n background: linear-gradient(90deg,#fff,transparent);\n}\n\n@keyframes animate {\n 0% {\n transform: rotate(315deg) translateX(0);\n opacity: 1;\n }\n\n 70% {\n opacity: 1;\n }\n\n 100% {\n transform: rotate(315deg) translateX(-1000px);\n opacity: 0;\n }\n}\n\n.star:nth-child(1) {\n top: 0;\n right: 0;\n left: initial;\n animation-delay: 0s;\n animation-duration: 1s;\n}\n\n.star:nth-child(2) {\n top: 0;\n right: 100px;\n left: initial;\n animation-delay: 0.2s;\n animation-duration: 3s;\n}\n\n.star:nth-child(3) {\n top: 0;\n right: 220px;\n left: initial;\n animation-delay: 2.75s;\n animation-duration: 2.75s;\n}\n\n.star:nth-child(4) {\n top: 0;\n right: -220px;\n left: initial;\n animation-delay: 1.6s;\n animation-duration: 1.6s;\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"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"8bd044","snapshot":null,"tags":null,"title":"form by Galahhad","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":6296,"jsLen":0,"cssLen":3544,"pureCSS":1,"html":"

\n \n \n

","css":".form-container__sign-app-buttons svg {\n width: 22px;\n height: auto;\n}\n\n.google svg {\n width: 18px;\n height: auto;\n}\n\n.form-container {\n min-width: 350px;\n box-sizing: border-box;\n font-family: sans-serif;\n color: #4b4b4b;\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: #f5f5f5;\n}\n\n.form-container:focus-within:not(:focus) {\n box-shadow: 0 0 6px 3px #caedff;\n -webkit-box-shadow: 0 0 6px 3px #caedff;\n outline: 1px solid #97dbff;\n}\n\n.form-container p {\n font-size: 14px;\n font-weight: bold;\n margin-bottom: 14px;\n}\n\n.top-line {\n padding-top: 12px;\n}\n\n.form-container__form {\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n}\n\n.form-container__form input {\n height: 31px;\n border: 1px solid #d9d9d9;\n padding: 4px;\n font-size: 14px;\n line-height: 1.65;\n -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;\n}\n\n.form-container__form input:focus {\n border-color: #00a6fd;\n outline: 0;\n box-shadow: none;\n}\n\n.form-container__register-buttons {\n display: flex;\n column-gap: 10px;\n}\n\n.form-container__sign {\n padding: 8px 20px;\n font-size: 14px;\n line-height: 1.65;\n border-radius: 20px;\n width: 110px;\n white-space: nowrap;\n background-color: #00a6fd;\n border: none;\n color: white;\n font-weight: bold;\n cursor: pointer;\n}\n\n.form-container__sign:first-child:active,\n.form-container__sign:first-child:hover {\n background-color: #0099e9;\n}\n\n.form-container__sign:focus {\n outline-offset: -2px;\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}\n\n.forgot {\n width: auto;\n padding: 8px 0;\n background: none;\n font-weight: 400;\n color: #428bca;\n text-decoration: none;\n}\n\n.forgot:hover {\n text-decoration: underline;\n color: #4c9dd0;\n}\n\n.form-container__header {\n padding-bottom: 16px;\n}\n\n.form-container__footer {\n padding-top: 12px;\n border-top: 1px solid #cacaca;\n}\n\n.form-container__sign-app-buttons {\n display: flex;\n column-gap: 24px;\n}\n\n.form-container__sign-app-buttons button:not(:first-child) {\n border: none;\n background: none;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.form-container__sign-app-buttons button:not(:first-child)::before {\n position: absolute;\n content: '';\n width: 120%;\n height: 2px;\n background: rgb(187, 187, 187);\n bottom: 0;\n opacity: 0;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):hover::before {\n opacity: 1;\n transition: 1s;\n}\n\n.form-container__sign-app-buttons button:not(:first-child):focus::before {\n opacity: 1;\n background-color: #4b4b4b;\n}\n\n.form-container__sign-app-buttons button:first-child {\n justify-content: center;\n min-width: 110px;\n height: 40px;\n border: none;\n background: white;\n border-radius: 2px;\n box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;\n display: flex;\n align-items: center;\n color: #4b4b4b;\n font-size: 13px;\n column-gap: 15px;\n cursor: pointer;\n}\n\n.form-container__sign-app-buttons button:first-child:active {\n background: #eeeeee;\n}\n\n.form-container__sign-app-buttons button:first-child:focus:not(:active) {\n outline: none;\n -webkit-box-shadow: inset 0 0 3px 1px #97dbff;\n box-shadow: inset 0 0 3px 1px #97dbff;\n}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"df52af","snapshot":null,"tags":null,"title":"form by emmanuelh-dev","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1751,"jsLen":0,"cssLen":2960,"pureCSS":1,"html":"

Reset password

\n \n

","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}}"},{"created":"2024-01-22T17:20:16.000Z","isPrivate":0,"projectId":"e6c432","snapshot":null,"tags":null,"title":"form by John-CFO","updated":"2024-01-22T17:20:16.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":631,"jsLen":0,"cssLen":3220,"pureCSS":1,"html":"","css":".form {\n --glow-color: rgb(176, 255, 251);\n --glow-spread-color: rgba(123, 246, 255, 0.781);\n --enhanced-glow-color: rgb(182, 71, 71);\n --btn-color: rgba(65, 65, 65, 0.508);\n border: 2px solid var(--glow-color);\n padding: 25px;\n display: flex;\n max-width: 420px;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n color: var(--glow-color);\n background-color: var(--btn-color);\n border-radius: 20px;\n position: relative;\n}\n\n/*----heading and description-----*/\n\n.info {\n margin-bottom: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.title {\n color: #fff;\n font-size: 1.6rem;\n font-weight: 900;\n}\n\n.description {\n color: #fff;\n margin-top: 10px;\n font-size: 1rem;\n}\n\n/*----input-fields------*/\n\n.form .input-fields {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n}\n\n.form .input-fields input {\n height: 2.5em;\n width: 2.5em;\n outline: none;\n text-align: center;\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n font-size: 1.5rem;\n color: #fff;\n border-radius: 12px;\n border: 2.5px solid rgba(253, 253, 253, 0.363);\n background-color: rgb(255 255 255 / 0.05);\n}\n\n.form .input-fields input:focus {\n border: 1px solid rgb(99, 236, 241);\n box-shadow: inset -1px -1px 5px rgba(255, 255, 255, .6),\n inset 10px 10px 10px rgba(0, 0, 0, .25);\n transform: scale(1.05);\n transition: 0.5s;\n}\n\n/*-----verify and clear buttons-----*/\n\n.action-btns {\n display: flex;\n margin-top: 12px;\n gap: 0.5rem;\n}\n\n.verify {\n padding: 10px 20px;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 500;\n color: #00f7ff;\n text-shadow: none;\n background: transparent;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n.verify:hover,:focus {\n color: #ffffff;\n background: #00eeff;\n border: 1px solid #00e1ff;\n text-shadow: 0 0 5px #ffffff,\n 0 0 10px #ffffff,\n 0 0 20px #ffffff;\n box-shadow: 0 0 5px #00e1ff,\n 0 0 20px #00e1ff,\n 0 0 50px #00e1ff,\n 0 0 100px #00e1ff;\n}\n\n.clear {\n padding: 10px 20px;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 500;\n color: #ff0000;\n text-shadow: none;\n background: transparent;\n box-shadow: transparent;\n border: 1px solid #ffffff80;\n transition: 0.5s ease;\n user-select: none;\n}\n\n.clear:hover,:focus {\n color: #ffffff;\n background: #ff0000;\n border: 1px solid #ff0000;\n text-shadow: 0 0 5px #ffffff,\n 0 0 10px #ffffff,\n 0 0 20px #ffffff;\n box-shadow: 0 0 5px #ff0000,\n 0 0 20px #ff0000,\n 0 0 50px #ff0000,\n 0 0 100px #ff0000;\n}\n\n/*-----close button------*/\n\n.close {\n position: absolute;\n right: 10px;\n top: 10px;\n background-color: #494949;\n color: #ff0000;\n height: 30px;\n width: 30px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n cursor: pointer;\n font-weight: 600;\n transition: .5s ease;\n}\n\n.close:hover {\n background-color: rgba(255, 0, 0, 0.644);\n color: #fff;\n}"}]}},"actionData":null,"errors":null}