{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"dc91b0","snapshot":null,"tags":null,"title":"form by Shoh2008","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":182,"cssLen":671,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: #1e1e1e;\n padding: 20px;\n border: 1px solid #3d3c3c;\n border-radius: 10px;\n color: white;\n text-align: center;\n font-size: 20px;\n}\n\n.form input {\n height: 35px;\n outline: none;\n border: 2px solid orange;\n background: transparent;\n padding: 20px 10px;\n border-radius: 5px;\n transition: .5s;\n color: white;\n font-size: 20px;\n}\n\n.form input:focus {\n background: orange;\n}\n\n.form button {\n width: 100%;\n color: white;\n transition: .5s;\n font-size: 20px;\n outline: none;\n border: none;\n height: 45px;\n border-radius: 5px;\n background: orange;\n align-self: flex-end;\n}\n "},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"108524","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2556,"cssLen":3637,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Create an account\n \n \n

\n \n Your username\n \n \n

\n \n Password\n \n \n

\n \n Confirm password\n \n \n

\n \n

\n \n I accept the\n \n Terms and Conditions\n \n \n

\n\n \n \n

\n ","css":".mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:0.5rem}.ml-3{margin-left:0.75rem}.block{display:block}.flex{display:flex}.h-4{height:1rem}.h-5{height:1.25rem}.w-4{width:1rem}.w-full{width:100%}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.p-6{padding:1.5rem}.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-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.ring-offset-gray-800{--tw-ring-offset-color:#1f2937}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-4: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(4px + 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-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(30 64 175 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:max-w-md{max-width:28rem}.sm\\:p-8{padding:2rem}.sm\\:text-sm{font-size:0.875rem;line-height:1.25rem}}@media (min-width: 768px){.md\\:mt-0{margin-top:0px}.md\\: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))}.md\\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width: 1024px){.lg\\:py-0{padding-top:0px;padding-bottom:0px}}@media (min-width: 1280px){.xl\\:p-0{padding:0px}}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"55ed7b","snapshot":null,"tags":null,"title":"form by andrew-demchenk0","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":352,"cssLen":598,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

","css":".feed-form {\n margin-top: 36px;\n display: flex;\n flex-direction: column;\n width: 300px;\n}\n\n.feed-form input {\n height: 54px;\n border-radius: 5px;\n background: white;\n margin-bottom: 15px;\n border: none;\n padding: 0 20px;\n font-weight: 300;\n font-size: 14px;\n color: #4B4B4B;\n}\n\n.button_submit:hover, .feed-form input:hover {\n transform: scale(1.009);\n box-shadow: 0px 0px 3px 0px #212529;\n}\n\n.button_submit {\n width: 100%;\n height: 54px;\n font-size: 14px;\n color: white;\n background: red;\n border-radius: 5px;\n border: none;\n font-weight: 500;\n text-transform: uppercase;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"8064c6","snapshot":null,"tags":null,"title":"form by vinodjangid07","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":827,"cssLen":809,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".file-upload-form {\n width: fit-content;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.file-upload-label input {\n display: none;\n}\n.file-upload-label svg {\n height: 50px;\n fill: rgb(82, 82, 82);\n margin-bottom: 20px;\n}\n.file-upload-label {\n cursor: pointer;\n background-color: #ddd;\n padding: 30px 70px;\n border-radius: 40px;\n border: 2px dashed rgb(82, 82, 82);\n box-shadow: 0px 0px 200px -50px rgba(0, 0, 0, 0.719);\n}\n.file-upload-design {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n.browse-button {\n background-color: rgb(82, 82, 82);\n padding: 5px 15px;\n border-radius: 10px;\n color: white;\n transition: all 0.3s;\n}\n.browse-button:hover {\n background-color: rgb(14, 14, 14);\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"906498","snapshot":null,"tags":null,"title":"form by Phelix652","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1690,"cssLen":2291,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-left: 2em;\n padding-right: 2em;\n padding-bottom: 0.4em;\n background-color: #171717;\n border-radius: 20px;\n}\n\n#heading {\n text-align: center;\n margin: 2em;\n color: rgb(0, 255, 200);\n font-size: 1.2em;\n}\n\n.field {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5em;\n border-radius: 25px;\n padding: 0.6em;\n border: none;\n outline: none;\n color: white;\n background-color: #171717;\n box-shadow: inset 2px 5px 10px rgb(5, 5, 5);\n}\n\n.input-icon {\n height: 1.3em;\n width: 1.3em;\n fill: rgb(0, 255, 200);\n}\n\n.input-field {\n background: none;\n border: none;\n outline: none;\n width: 100%;\n color: rgb(0, 255, 200);\n}\n\n.form .btn {\n display: flex;\n justify-content: center;\n flex-direction: row;\n margin-top: 2.5em;\n}\n\n.button1 {\n padding: 0.5em;\n padding-left: 1.1em;\n padding-right: 1.1em;\n border-radius: 5px;\n margin-right: 0.5em;\n border: none;\n outline: none;\n transition: .4s ease-in-out;\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n color: rgb(0, 0, 0);\n}\n\n.button1:hover {\n background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%);\n color: rgb(0, 255, 200);\n}\n\n.button2 {\n padding: 0.5em;\n padding-left: 2.3em;\n padding-right: 2.3em;\n border-radius: 5px;\n border: none;\n outline: none;\n transition: .4s ease-in-out;\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n color: rgb(0, 0, 0);\n}\n\n.button2:hover {\n background-image: linear-gradient(163deg, #00642f 0%, #13034b 100%);\n color: rgb(0, 255, 200);\n}\n\n.button3 {\n margin-bottom: 3em;\n padding: 0.5em;\n border-radius: 5px;\n border: none;\n outline: none;\n transition: .4s ease-in-out;\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n color: rgb(0, 0, 0);\n}\n\n.button3:hover {\n background-image: linear-gradient(163deg, #a00000fa 0%, #d10050 100%);\n color: rgb(255, 255, 255);\n}\n\n.card {\n background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);\n border-radius: 22px;\n transition: all .3s;\n}\n\n.card2 {\n border-radius: 0;\n transition: all .2s;\n}\n\n.card2:hover {\n transform: scale(0.98);\n border-radius: 20px;\n}\n\n.card:hover {\n box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"2bf5ec","snapshot":null,"tags":null,"title":"form by omar-alghaish","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":296,"cssLen":912,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".form-container {\n width: 300px;\n background: linear-gradient(180deg,rgb(0, 183, 255) 25%,rgb(255, 255, 255) 20%);\n height: 350px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.form {\n width: 80%;\n display: flex;\n flex-direction: column;\n margin-top: 40px;\n}\n\n.form-container p {\n position: absolute;\n top: 10%;\n left: 10%;\n font-size: 30px;\n font-weight: 900;\n color: rgb(255, 255, 255);\n}\n\n.form-container label {\n color: rgb(40, 42, 44);\n margin-top: 15px;\n margin-bottom: 5px;\n font-size: 15px;\n}\n\n.form-container .input {\n padding: 10px;\n height: 35px;\n border: none;\n background-color: rgb(224, 231, 236);\n}\n\n.form-container .input:focus {\n outline: none;\n}\n\n.form-container button {\n border: none;\n height: 35px;\n margin-top: 30px;\n background-color: rgb(0, 183, 255);\n color: white;\n font-size: 16px;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"008d34","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1768,"cssLen":3403,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity))\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / 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-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / 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-600:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(75 85 99 / 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:14.000Z","isPrivate":0,"projectId":"192c01","snapshot":null,"tags":null,"title":"form by ClawHack1","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":416,"cssLen":1035,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Contact Us\n \n

\n","css":".contact-form {\n background-color: #f2f2f2;\n padding: 20px;\n border-radius: 10px;\n}\n\n.contact-form label {\n color: black;\n}\n\n.contact-form .heading {\n font-size: 24px;\n color: black;\n ;\n margin-bottom: 12px;\n font-weight: bold;\n display: block;\n}\n\n.contact-form form {\n display: flex;\n flex-direction: column;\n}\n\n.contact-form label {\n margin-bottom: 10px;\n}\n\ntextarea {\n resize: none;\n height: 80px;\n width: 200px;\n}\n\n.contact-form input, .contact-form textarea {\n padding: 10px;\n border: none;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n\n.contact-form input:focus, .contact-form textarea:focus {\n outline: none;\n box-shadow: 0 0 5px #ff6384;\n transform: scale(1.05);\n transition: transform 0.3s ease-in-out;\n}\n\n.contact-form button[type=\"submit\"] {\n background-color: #ff6384;\n color: #fff;\n border: none;\n border-radius: 5px;\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n}\n\n.contact-form button[type=\"submit\"]:hover {\n transform: scale(1.1);\n transition: transform 0.3s ease-in-out;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"72846b","snapshot":null,"tags":null,"title":"form by Javierrocadev","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1861,"cssLen":3714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".relative {\n position: relative\n}\n\n.mb-2 {\n margin-bottom: 0.5rem\n}\n\n.mb-4 {\n margin-bottom: 1rem\n}\n\n.mt-1 {\n margin-top: 0.25rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.h-6 {\n height: 1.5rem\n}\n\n.h-80 {\n height: 20rem\n}\n\n.w-6 {\n width: 1.5rem\n}\n\n.w-64 {\n width: 16rem\n}\n\n.w-full {\n width: 100%\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.justify-center {\n justify-content: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.gap-3 {\n gap: 0.75rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-sky-500 {\n --tw-border-opacity: 1;\n border-color: rgb(14 165 233 / var(--tw-border-opacity))\n}\n\n.bg-sky-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(240 249 255 / var(--tw-bg-opacity))\n}\n\n.bg-sky-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(14 165 233 / var(--tw-bg-opacity))\n}\n\n.fill-current {\n fill: currentColor\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.text-center {\n text-align: center\n}\n\n.text-right {\n text-align: right\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity))\n}\n\n.text-sky-50 {\n --tw-text-opacity: 1;\n color: rgb(240 249 255 / var(--tw-text-opacity))\n}\n\n.text-sky-500 {\n --tw-text-opacity: 1;\n color: rgb(14 165 233 / var(--tw-text-opacity))\n}\n\n.opacity-50 {\n opacity: 0.5\n}\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), 0 1px 2px -1px 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.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:-right-4::after {\n content: var(--tw-content);\n right: -1rem\n}\n\n.after\\:-top-4::after {\n content: var(--tw-content);\n top: -1rem\n}\n\n.after\\:-z-10::after {\n content: var(--tw-content);\n z-index: -10\n}\n\n.after\\:h-24::after {\n content: var(--tw-content);\n height: 6rem\n}\n\n.after\\:w-24::after {\n content: var(--tw-content);\n width: 6rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-sky-300::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(125 211 252 / var(--tw-bg-opacity))\n}\n\n.after\\:blur-xl::after {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n 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)\n}\n\n.after\\:content-\\[\\'\\*\\'\\]::after{--tw-content:'*';content:var(--tw-content)}.after\\:\\[box-shadow\\:-150px_50px_10px_100px_\\#7dd3fc\\]::after{content:var(--tw-content);box-shadow:-150px 50px 10px 100px #7dd3fc}.hover\\:bg-sky-100:hover{--tw-bg-opacity:1;background-color:rgb(224 242 254 / var(--tw-bg-opacity))}.hover\\:bg-sky-400:hover{--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.focus\\:ring-2: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(2px + 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-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"c7262e","snapshot":null,"tags":null,"title":"form by Spacious74","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1000,"cssLen":1836,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

SignIn to your account

\n \n

\n","css":".container {\n border: solid 1px #8d8d8d;\n padding: 20px;\n border-radius: 20px;\n background-color: #fff;\n}\n\n.container .heading {\n font-size: 1.3rem;\n margin-bottom: 20px;\n font-weight: bolder;\n}\n\n.form {\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.form .btn-container {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.form .btn {\n padding: 10px 20px;\n font-size: 1rem;\n text-transform: uppercase;\n letter-spacing: 3px;\n border-radius: 10px;\n border: solid 1px #1034aa;\n border-bottom: solid 1px #90c2ff;\n background: linear-gradient(135deg, #0034de, #006eff);\n color: #fff;\n font-weight: bolder;\n transition: all 0.2s ease;\n box-shadow: 0px 2px 3px #000d3848, inset 0px 4px 5px #0070f0,\n inset 0px -4px 5px #002cbb;\n}\n\n.form .btn:active {\n box-shadow: inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;\n transform: scale(0.995);\n}\n\n.input-field {\n position: relative;\n}\n\n.input-field label {\n position: absolute;\n color: #8d8d8d;\n pointer-events: none;\n background-color: transparent;\n left: 15px;\n transform: translateY(0.6rem);\n transition: all 0.3s ease;\n}\n\n.input-field input {\n padding: 10px 15px;\n font-size: 1rem;\n border-radius: 8px;\n border: solid 1px #8d8d8d;\n letter-spacing: 1px;\n width: 100%;\n}\n\n.input-field input:focus,\n.input-field input:valid {\n outline: none;\n border: solid 1px #0034de;\n}\n\n.input-field input:focus ~ label,\n.input-field input:valid ~ label {\n transform: translateY(-51%) translateX(-10px) scale(0.8);\n background-color: #fff;\n padding: 0px 5px;\n color: #0034de;\n font-weight: bold;\n letter-spacing: 1px;\n border: none;\n border-radius: 100px;\n}\n\n.form .passicon {\n cursor: pointer;\n font-size: 1.3rem;\n position: absolute;\n top: 6px;\n right: 8px;\n}\n\n.form .close {\n display: none;\n}\n"},{"created":"2024-01-22T17:20:13.000Z","isPrivate":0,"projectId":"3e8f7f","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":15918,"cssLen":4751,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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 E-mail\n

\n \n Forgot Password?\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sign in with Google\n \n \n \n \n \n Sign in with Apple\n \n

\n \n Log in\n \n

\n \n or sign up\n \n

\n\n","css":".relative{position:relative}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-2{margin-left:0.5rem}.mt-1{margin-top:0.25rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.w-1\\/5{width:20%}.w-full{width:100%}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-5 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-3xl{border-radius:1.5rem}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-20{padding-left:5rem;padding-right:5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-1{padding-bottom:0.25rem}.text-center{text-align:center}.text-right{text-align:right}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.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-200{transition-duration:200ms}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.hover\\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2: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(2px + 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))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\\:ring-offset-blue-200:focus{--tw-ring-offset-color:#bfdbfe}@media (min-width: 640px){.sm\\:mx-auto{margin-left:auto;margin-right:auto}.sm\\:max-w-xl{max-width:36rem}.sm\\:p-10{padding:2.5rem}}@media (min-width: 768px){.md\\:mx-0{margin-left:0px;margin-right:0px}.md\\:w-1\\/4{width:25%}}@media (prefers-color-scheme: dark){.dark\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.dark\\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.dark\\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}}"},{"created":"2024-01-22T17:20:13.000Z","isPrivate":0,"projectId":"58af52","snapshot":null,"tags":null,"title":"form by kennyotsu-monochromia","updated":"2024-01-22T17:20:13.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":2765,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n --tomato: #fa5656;\n font-family: Helvetica, sans-serif;\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(--night-rider);\n background-color: var(--white);\n border-radius: 8px;\n position: relative;\n box-shadow: 10px 10px 10px rgba(0, 0, 0, .15);\n}\n\n/*----heading and description-----*/\n\n.info {\n margin-bottom: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.title {\n font-size: 1.5rem;\n font-weight: 900;\n}\n\n.description {\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: var(--ch-black);\n border-radius: 5px;\n border: 2.5px solid var(--ch-white);\n background-color: var(--ch-white);\n}\n\n.form .input-fields input:focus {\n border: 1px solid var(--night-rider);\n box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15);\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: 20px;\n gap: 0.5rem;\n}\n\n.verify {\n padding: 10px 20px;\n text-decoration: none;\n border-radius: 5px;\n font-size: 1rem;\n font-weight: 500;\n color: var(--white);\n text-shadow: none;\n background: var(--ch-black);\n box-shadow: transparent;\n border: 1px solid var(--night-rider);\n transition: 0.5s ease;\n user-select: none;\n}\n\n.verify:hover,.verify:focus {\n color: var(--white);\n background: var(--night-rider);\n}\n\n.clear {\n padding: 10px 20px;\n text-decoration: none;\n border-radius: 5px;\n font-size: 1rem;\n font-weight: 500;\n color: var(--night-rider);\n text-shadow: none;\n background: transparent;\n border: 1px solid var(--night-rider);\n transition: 0.5s ease;\n user-select: none;\n}\n\n.clear:hover,.clear:focus {\n color: var(--tomato);\n background-color: var(--white);\n border: 1px solid var(--tomato);\n}\n\n/*-----close button------*/\n\n.close {\n position: absolute;\n right: 10px;\n top: 10px;\n background-color: var(--ch-white);\n color: var(--af-white);\n height: 30px;\n width: 30px;\n display: grid;\n place-items: center;\n border-radius: 5px;\n cursor: pointer;\n font-weight: 600;\n transition: .5s ease;\n}\n\n.close:hover {\n background-color: var(--tomato);\n color: var(--white);\n}"}]}},"actionData":null,"errors":null}