{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"c0473b","snapshot":null,"tags":null,"title":"form by jimmychen338","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1215,"cssLen":2550,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n\n","css":".-mx-2 {\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.h-80 {\n height: 20rem;\n}\n.w-64 {\n width: 16rem;\n}\n.w-full {\n width: 100%;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-between {\n justify-content: space-between;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.border-4 {\n border-width: 4px;\n}\n.border-dotted {\n border-style: dotted;\n}\n.border-indigo-500 {\n --tw-border-opacity: 1;\n border-color: rgb(99 102 241 / var(--tw-border-opacity));\n}\n.bg-indigo-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 242 255 / var(--tw-bg-opacity));\n}\n.bg-indigo-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(99 102 241 / var(--tw-bg-opacity));\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-5 {\n padding: 1.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.italic {\n font-style: italic;\n}\n.text-indigo-50 {\n --tw-text-opacity: 1;\n color: rgb(238 242 255 / var(--tw-text-opacity));\n}\n.text-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / 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.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.after\\:text-red-400::after {\n content: var(--tw-content);\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity));\n}\n.after\\:content-\\[\\'\\*\\'\\]::after {\n --tw-content: \"*\";\n content: var(--tw-content);\n}\n.hover\\:bg-indigo-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(129 140 248 / var(--tw-bg-opacity));\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-indigo-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));\n}\n"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"efb576","snapshot":null,"tags":null,"title":"form by KhelVers","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":381,"cssLen":948,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".login-container {\n width: 300px;\n padding: 20px;\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1), 0px 0px 0px 3px #3498db, inset 0px 0px 10px rgba(0, 0, 0, 0.1);\n}\n\n.login-header {\n font-size: x-large;\n font-weight: 600;\n text-align: center;\n margin-bottom: 20px;\n}\n\n.login-header h1 {\n color: #333;\n font-size: 24px;\n}\n\n.login-input {\n width: 100%;\n padding: 10px;\n margin-bottom: 15px;\n border: none;\n background: #f5f5f5;\n border-radius: 4px;\n box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.login-button {\n width: 100%;\n padding: 10px;\n border: none;\n background: #3498db;\n color: #fff;\n font-weight: bold;\n border-radius: 4px;\n cursor: pointer;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.5);\n transition: background 0.3s ease, transform 0.2s ease;\n}\n\n.login-button:hover {\n background: #2980b9;\n transform: translateY(-2px);\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"458452","snapshot":null,"tags":null,"title":"form by kennyotsu-monochromia","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":2720,"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 padding: 25px;\n display: flex;\n max-width: 420px;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n color: var(--af-white);\n background-color: var(--black);\n border-radius: 8px;\n position: relative;\n box-shadow: 10px 10px 10px rgba(0, 0, 0, .1);\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(--af-white);\n border-radius: 5px;\n border: 2.5px solid var(--eer-black);\n background-color: var(--eer-black);\n}\n\n.form .input-fields input:focus {\n border: 1px solid var(--af-white);\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(--night-rider);\n text-shadow: none;\n background: var(--af-white);\n box-shadow: transparent;\n border: 1px solid var(--af-white);\n transition: 0.3s ease;\n user-select: none;\n}\n\n.verify:hover,.verify:focus {\n color: var(--night-rider);\n background: var(--white);\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(--ch-white);\n text-shadow: none;\n background: transparent;\n border: 1px solid var(--ch-white);\n transition: 0.3s ease;\n user-select: none;\n}\n\n.clear:hover,.clear:focus {\n color: var(--tomato);\n background-color: transparent;\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(--night-rider);\n color: var(--ch-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}"},{"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,"htmlType":"html","pureCSS":1,"htmlLen":1137,"cssLen":1859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"dc76a1","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1838,"cssLen":3406,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Job Application 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-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.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":"90e00e","snapshot":null,"tags":null,"title":"form by reshades","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":783,"cssLen":1479,"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: #00000000;\n border-radius: 16px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(8.2px);\n -webkit-backdrop-filter: blur(8.2px);\n border: 1px solid #369eff66;\n width: 14em;\n height: 14em;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.form p {\n color: #fff;\n font-weight: bolder;\n}\n\n.path {\n fill: #369eff\n}\n\n.svg {\n filter: blur(20px);\n z-index: -1;\n position: absolute;\n opacity: 50%;\n animation: anim 3s infinite;\n}\n\n.inp {\n margin-left: auto;\n margin-right: auto;\n white-space: 4px;\n}\n\n.input + .input {\n margin-left: 0.3em\n}\n\n.input {\n color: #fff;\n height: 2em;\n width: 2em;\n float: left;\n text-align: center;\n background: #00000000;\n outline: none;\n border: 1px #369eff solid;\n border-radius: 10px;\n transition: all 0.6s ease;\n}\n\n.input:focus {\n outline: none;\n border: 1px #fff solid;\n}\n\n.input:not(:placeholder-shown) {\n opacity: 40%\n}\n\n.form button {\n margin-left: auto;\n margin-right: auto;\n background-color: #00000000;\n color: #fff;\n width: 8.5em;\n height: 2.3em;\n border: #369eff 0.2em solid;\n border-radius: 11px;\n transition: all 0.5s ease;\n}\n\n.form button:hover {\n background-color: #369eff;\n}\n\n@keyframes anim {\n 0% {\n transform: translateY(-70px);\n }\n\n 50% {\n transform: translateY(-19px);\n }\n\n 100% {\n transform: translateY(-70px);\n }\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"867d07","snapshot":null,"tags":null,"title":"form by Javierrocadev","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1630,"cssLen":3522,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Update Your Profile

\n\n \n\n","css":".relative{position:relative}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:0.25rem}.block{display:block}.flex{display:flex}.w-full{width:100%}.max-w-md{max-width:28rem}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.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-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-400{--tw-gradient-to:rgb(192 132 252 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #c084fc var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-8{padding:2rem}.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}.font-medium{font-weight:500}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / 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)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:-z-10::before{content:var(--tw-content);z-index:-10}.before\\:h-24::before{content:var(--tw-content);height:6rem}.before\\:w-24::before{content:var(--tw-content);width:6rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-purple-600::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(147 51 234 / var(--tw-bg-opacity))}.before\\:blur-2xl::before{content:var(--tw-content);--tw-blur:blur(40px);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)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:-right-12::after{content:var(--tw-content);right:-3rem}.after\\:top-24::after{content:var(--tw-content);top:6rem}.after\\:-z-10::after{content:var(--tw-content);z-index:-10}.after\\:h-32::after{content:var(--tw-content);height:8rem}.after\\:w-32::after{content:var(--tw-content);width:8rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-sky-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.after\\:blur-xl::after{content:var(--tw-content);--tw-blur:blur(24px);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)}.hover\\:opacity-80:hover{opacity:0.8}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"826f04","snapshot":null,"tags":null,"title":"form by ahkamboh","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1716,"cssLen":1545,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n","css":".flex {\n display: flex\n}\n\n.grid {\n display: grid\n}\n\n.h-screen {\n height: 100vh\n}\n\n.w-full {\n width: 100%\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.gap-3 {\n gap: 0.75rem\n}\n\n.gap-6 {\n gap: 1.5rem\n}\n\n.border-\\[\\#035ec5\\] {\n --tw-border-opacity: 1;\n border-color: rgb(3 94 197 / var(--tw-border-opacity))\n}\n\n.bg-\\[\\#ffffff42\\] {\n background-color: #ffffff42\n}\n\n.p-3 {\n padding: 0.75rem\n}\n\n.px-7 {\n padding-left: 1.75rem;\n padding-right: 1.75rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.capitalize {\n text-transform: capitalize\n}\n\n.text-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px 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.placeholder\\:text-black::placeholder {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.hover\\:border-\\[1px\\]:hover {\n border-width: 1px\n}\n\n.hover\\:border-solid:hover {\n border-style: solid\n}\n\n.hover\\:border-\\[\\#035ec5\\]:hover {\n --tw-border-opacity: 1;\n border-color: rgb(3 94 197 / var(--tw-border-opacity))\n}\n\n.hover\\:text-\\[\\#035ec5\\]:hover {\n --tw-text-opacity: 1;\n color: rgb(3 94 197 / var(--tw-text-opacity))\n}\n\n.focus\\:border-\\[1px\\]:focus {\n border-width: 1px\n}\n\n.focus\\:border-solid:focus {\n border-style: solid\n}"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"cb1d99","snapshot":null,"tags":null,"title":"form by rahilansari261","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":848,"cssLen":1677,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Welcome

Let's create your account!

\n\n

\n \n

\n First name\n

\n\n

\n \n

\n Last name\n

\n \n

\n Email\n

\n \n

","css":".form {\n background-color: #15172b;\n border-radius: 20px;\n box-sizing: border-box;\n height: 500px;\n padding: 20px;\n width: 320px;\n}\n\n.title {\n color: #eee;\n font-family: sans-serif;\n font-size: 36px;\n font-weight: 600;\n margin-top: 30px;\n}\n\n.subtitle {\n color: #eee;\n font-family: sans-serif;\n font-size: 16px;\n font-weight: 600;\n margin-top: 10px;\n}\n\n.input-container {\n height: 50px;\n position: relative;\n width: 100%;\n}\n\n.ic1 {\n margin-top: 40px;\n}\n\n.ic2 {\n margin-top: 30px;\n}\n\n.input {\n background-color: #303245;\n border-radius: 12px;\n border: 0;\n box-sizing: border-box;\n color: #eee;\n font-size: 18px;\n height: 100%;\n outline: 0;\n padding: 4px 20px 0;\n width: 100%;\n}\n\n.cut {\n background-color: #15172b;\n border-radius: 10px;\n height: 20px;\n left: 20px;\n position: absolute;\n top: -20px;\n transform: translateY(0);\n transition: transform 200ms;\n width: 76px;\n}\n\n.cut-short {\n width: 50px;\n}\n\n.iLabel {\n color: #65657b;\n font-family: sans-serif;\n left: 20px;\n line-height: 14px;\n pointer-events: none;\n position: absolute;\n transform-origin: 0 50%;\n transition: transform 200ms, color 200ms;\n top: 20px;\n}\n\n.input:focus ~ .cut {\n transform: translateY(8px);\n}\n\n.input:focus ~ .iLabel {\n transform: translateY(-30px) translateX(10px) scale(0.75);\n}\n\n.input:not(:focus) ~ .iLabel {\n color: #808097;\n}\n\n.input:focus ~ .iLabel {\n color: #dc2f55;\n}\n\n.submit {\n background-color: #08d;\n border-radius: 12px;\n border: 0;\n box-sizing: border-box;\n color: #eee;\n cursor: pointer;\n font-size: 18px;\n height: 50px;\n margin-top: 38px;\n text-align: center;\n width: 100%;\n}\n\n.submit:active {\n background-color: #06b;\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,"htmlType":"html","pureCSS":1,"htmlLen":974,"cssLen":3345,"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 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":"d876d0","snapshot":null,"tags":null,"title":"form by codebykay101","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":609,"cssLen":2034,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".container {\n width: 350px;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 3px;\n border: 1px solid #396afc;\n background: linear-gradient(to right, #005c97, #363795);\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n}\n\n.container form .descr {\n font-size: 20px;\n font-weight: 500;\n color: #e8e8e8;\n margin-bottom: 25px;\n margin-top: 25px;\n text-align: center;\n}\n\n.form {\n display: flex;\n flex-direction: column;\n}\n\n.input, textarea {\n margin: 1em 0 1em 0;\n width: 300px;\n position: relative;\n}\n\n.input input, textarea {\n font-size: 100%;\n padding: 0.7em;\n outline: none;\n color: #e8e8e8;\n border: none;\n border-bottom: 2px solid #e8e8e8;\n background: transparent;\n border-radius: none;\n width: 100%;\n resize: none;\n}\n\n.input label {\n font-size: 100%;\n position: absolute;\n left: 0;\n color: #e8e8e8;\n padding: 0.7em;\n margin-left: 0.1em;\n pointer-events: none;\n transition: all 0.5s ease;\n text-transform: uppercase;\n}\n\n.input :is(input:focus, input:valid)~label {\n transform: translateY(-50%) scale(.9);\n margin: 0em;\n padding: 0.4em;\n background: transparent;\n}\n\n.input textarea:focus ~ label,\n.input textarea:valid ~ label {\n transform: translateY(-50%) scale(.9);\n margin: 0em;\n padding: 0.4em;\n background: transparent;\n}\n\n.inputGroup :is(input:focus, input:valid) {\n border-color: rgb(37, 37, 211);\n}\n\n.form button {\n color: #e8e8e8;\n font-size: 15px;\n align-self: flex-start;\n padding: 0.6em;\n border: none;\n cursor: pointer;\n margin-bottom: 50px;\n background: transparent;\n transition: all 0.3s ease-in-out;\n position: relative;\n overflow: hidden;\n}\n\n.form button:before {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #e8e8e8;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n\n.form button:hover:before {\n opacity: 0.2;\n}\n\n.form button:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n"},{"created":"2024-01-22T17:20:10.000Z","isPrivate":0,"projectId":"e5c5d9","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1986,"cssLen":1673,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

AI Story Maker Dream Form

\n\n

\n Title\n \n

\n\n

\n Description\n \n

\n\n

\n Emotions\n \n

\n\n

\n Symbols\n \n

\n\n

\n Themes\n \n

\n\n

\n \n

\n\n

\n \n

\n","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\n}\n\n.h-48 {\n height: 12rem\n}\n\n.w-full {\n width: 100%\n}\n\n.flex-1 {\n flex: 1 1 0%\n}\n\n.flex-row {\n flex-direction: row\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.justify-end {\n justify-content: flex-end\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-md {\n border-radius: 0.375rem\n}\n\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity))\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.p-4 {\n padding: 1rem\n}\n\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\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-black {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 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.hover\\:bg-gray-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-gray-900:hover {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity))\n}"}]}},"actionData":null,"errors":null}