{"loaderData":{"0":null,"0-3":{"total":7437,"projects":[{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"ab2ee1","snapshot":null,"tags":null,"title":"form by zombie223","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":485,"cssLen":1830,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".group {\n position: relative;\n}\n\n.form {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n border: 1px solid white;\n padding: 120px 40px;\n padding-top: 60px;\n padding-bottom: 90px;\n padding-right: 40px;\n padding-left: 40px;\n background-color: black;\n border-radius: 20px;\n position: relative;\n}\n\n.form p {\n padding-bottom: 20px;\n font-size: 24px;\n font-weight: bold;\n letter-spacing: .5px;\n color: white;\n}\n\n.container-1 {\n padding-top: 30px;\n}\n\n.main-input {\n font-size: 16px;\n padding: 10px 10px 10px 5px;\n display: block;\n width: 185px;\n border: none;\n border-bottom: 1px solid #6c6c6c;\n background: transparent;\n color: #ffffff;\n}\n\n.main-input:focus {\n outline: none;\n border-bottom-color: #42ff1c;\n}\n\n.lebal-email {\n color: #999999;\n font-size: 18px;\n font-weight: normal;\n position: absolute;\n pointer-events: none;\n left: 5px;\n top: 10px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n}\n\n.main-input:focus ~ .lebal-email,\n.main-input:valid ~ .lebal-email {\n top: -20px;\n font-size: 14px;\n color: #42ff1c;\n}\n\n.highlight-span {\n position: absolute;\n height: 60%;\n width: 0px;\n top: 25%;\n left: 0;\n pointer-events: none;\n opacity: 0.5;\n}\n\n.main-input:focus ~ .highlight-span {\n -webkit-animation: input-focus 0.3s ease;\n animation: input-focus 0.3s ease;\n}\n\n@keyframes input-focus {\n from {\n background: #42ff1c;\n }\n\n to {\n width: 185px;\n }\n}\n\n.submit {\n margin-top: 1.2rem;\n padding: 10px 20px;\n border-radius: 10px;\n}"},{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"2db3b1","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1102,"cssLen":4335,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Login

\n \n

\n","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.-bottom-2 {\n bottom: -0.5rem\n}\n\n.-left-2 {\n left: -0.5rem\n}\n\n.-right-2 {\n right: -0.5rem\n}\n\n.-top-2 {\n top: -0.5rem\n}\n\n.z-10 {\n z-index: 10\n}\n\n.mb-10 {\n margin-bottom: 2.5rem\n}\n\n.flex {\n display: flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.h-96 {\n height: 24rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.w-full {\n width: 100%\n}\n\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n\n@keyframes pulse {\n 50% {\n opacity: .5\n }\n}\n\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.space-y-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))\n}\n\n.rounded {\n border-radius: 0.25rem\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.border {\n border-width: 1px\n}\n\n.border-gray-800 {\n --tw-border-opacity: 1;\n border-color: rgb(31 41 55 / var(--tw-border-opacity))\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 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-purple-400 {\n --tw-gradient-from: #c084fc var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.via-pink-500 {\n --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to)\n}\n\n.to-red-500 {\n --tw-gradient-to: #ef4444 var(--tw-gradient-to-position)\n}\n\n.p-16 {\n padding: 4rem\n}\n\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\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-center {\n text-align: center\n}\n\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem\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-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-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.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-blue-800:hover {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / var(--tw-text-opacity))\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px\n}"},{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"c88329","snapshot":null,"tags":null,"title":"form by KapeParaguay","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5094,"cssLen":2389,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n background: linear-gradient(45deg, red, yellow);\n padding: 30px;\n width: 450px;\n border-radius: 20px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n transition: background 0.3s ease;\n}\n\n.form:hover {\n background: linear-gradient(45deg, yellow, red);\n}\n\n::placeholder {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.form button {\n align-self: flex-end;\n}\n\n.flex-column > label {\n color: #151717;\n font-weight: 600;\n}\n\n.inputForm {\n border: 1.5px solid #ecedec;\n border-radius: 10em;\n height: 50px;\n display: flex;\n align-items: center;\n padding-left: 10px;\n transition: 0.2s ease-in-out;\n background-color: white;\n}\n\n.input {\n margin-left: 10px;\n border-radius: 10rem;\n border: none;\n width: 100%;\n height: 100%;\n}\n\n.input:focus {\n outline: none;\n}\n\n.inputForm:focus-within {\n border: 1.5px solid #2d79f3;\n}\n\n.flex-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n justify-content: space-between;\n}\n\n.flex-row > div > label {\n font-size: 14px;\n color: black;\n font-weight: 400;\n}\n\n.span {\n font-size: 14px;\n margin-left: 5px;\n color: white;\n font-weight: 500;\n cursor: pointer;\n}\n\n.button-submit {\n position: relative;\n display: inline-block;\n padding: 15px 30px;\n text-align: center;\n letter-spacing: 1px;\n text-decoration: none;\n background: transparent;\n transition: ease-out 0.5s;\n border: 2px solid;\n border-radius: 10em;\n box-shadow: inset 0 0 0 0 red;\n margin: 20px 0 10px 0;\n color: white;\n font-size: 15px;\n font-weight: 500;\n height: 50px;\n width: 100%;\n cursor: pointer;\n}\n\n.button-submit:hover {\n color: white;\n box-shadow: inset 0 -100px 0 0 darkorange;\n}\n\n.button-submit:active {\n transform: scale(0.9);\n}\n\n.p {\n text-align: center;\n color: black;\n font-size: 14px;\n margin: 5px 0;\n}\n\n.btn {\n margin-top: 10px;\n width: 100%;\n height: 50px;\n border-radius: 10em;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n gap: 10px;\n border: 1px solid #ededef;\n background-color: white;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n}\n\n.btn:hover {\n border: 1px solid #2d79f3;\n}\n"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"5149f7","snapshot":null,"tags":null,"title":"form by guilhermeyohan","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":259,"cssLen":587,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t\n\t

","css":".container {\n max-width: 300px;\n margin: 0 auto;\n padding: 20px;\n background-color: #13121269;\n border-radius: 5px;\n}\n\nlabel {\n font-weight: bold;\n display: block;\n margin-bottom: 10px;\n}\n\n.inpdddut[type=\"file\"] {\n padding: 10px;\n margin-bottom: 20px;\n border: none;\n background-color: #1aa3bb;\n border-radius: 5px;\n width: 100%;\n cursor: pointer;\n}\n\n.inpdddut[type=\"submit\"] {\n padding: 10px 20px;\n background-color: #008CBA;\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.inpdddut[type=\"submit\"]:hover {\n background-color: #006F8F;\n}\n "},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"59b0b7","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2591,"cssLen":3445,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Contact Form

\n\n

\n","css":".mb-4{margin-bottom:1rem}.mb-auto{margin-bottom:auto}.ml-\\[2\\%\\]{margin-left:2%}.mr-\\[2\\%\\]{margin-right:2%}.mt-4{margin-top:1rem}.flex{display:flex}.h-screen{height:100vh}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border-0{border-width:0px}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.hover\\:to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.focus\\:bg-gray-600:focus{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}@media (min-width: 768px){.md\\:mb-auto{margin-bottom:auto}.md\\:h-auto{height:auto}.md\\:max-h-\\[100px\\]{max-height:100px}.md\\:min-h-\\[100px\\]{min-height:100px}.md\\:w-\\[48\\%\\]{width:48%}.md\\:w-full{width:100%}.md\\:flex-auto{flex:1 1 auto}.md\\:flex-shrink{flex-shrink:1}.md\\:flex-grow{flex-grow:1}}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"2c0175","snapshot":null,"tags":null,"title":"form by Javierrocadev","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1495,"cssLen":3006,"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}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.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-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-sky-900{--tw-text-opacity:1;color:rgb(12 74 110 / 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)}.\\[background\\:linear-gradient\\(144deg\\2c \\#af40ff\\2c \\#5b42f3_50\\%\\2c \\#00ddeb\\)\\]{background:linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb)}.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-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(168 85 247 / 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:14.000Z","isPrivate":0,"projectId":"0a999b","snapshot":null,"tags":null,"title":"form by somshri16","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":974,"cssLen":3383,"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: #fff;\n padding: 20px;\n border-radius: 10px;\n position: relative;\n}\n\n.message {\n color: rgba(88, 87, 87, 0.822);\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 rgba(105, 105, 105, 0.397);\n border-radius: 5px;\n}\n\n.form label .input + span {\n position: absolute;\n left: 10px;\n top: 15px;\n color: grey;\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 rgba(105, 105, 105, 0.397);\n border-radius: 5px;\n}\n\n.form label .input01 + span {\n position: absolute;\n left: 10px;\n top: 50px;\n color: grey;\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: transparent;\n border: 2px solid #cacaca;\n border-radius: 0px;\n box-sizing: border-box;\n color: #fff;\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: #cacaca;\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: #818181;\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: white;\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: white;\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: white;\n transition: width 0.5s ease-out, right 0.3s ease-out;\n}\n\n.fancy:hover {\n color: white;\n background: #cacaca;\n}\n\n.fancy:hover::before {\n width: 1.5rem;\n background: white;\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:14.000Z","isPrivate":0,"projectId":"aa43e6","snapshot":null,"tags":null,"title":"form by Praashoo7","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":1290,"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-color: white;\n padding: 2.5em;\n border-radius: 25px;\n transition: .4s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 2px;\n}\n\n.form:hover {\n transform: translateX(-0.5em) translateY(-0.5em);\n border: 1px solid #171717;\n box-shadow: 10px 10px 0px #666666;\n}\n\n.heading {\n color: black;\n padding-bottom: 2em;\n text-align: center;\n font-weight: bold;\n}\n\n.input {\n border-radius: 5px;\n border: 1px solid whitesmoke;\n background-color: whitesmoke;\n outline: none;\n padding: 0.7em;\n transition: .4s ease-in-out;\n}\n\n.input:hover {\n box-shadow: 6px 6px 0px #969696,\n -3px -3px 10px #ffffff;\n}\n\n.input:focus {\n background: #ffffff;\n box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);\n}\n\n.form .btn {\n margin-top: 2em;\n align-self: center;\n padding: 0.7em;\n padding-left: 1em;\n padding-right: 1em;\n border-radius: 10px;\n border: none;\n color: black;\n transition: .4s ease-in-out;\n box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;\n}\n\n.form .btn:hover {\n box-shadow: 6px 6px 0px #969696,\n -3px -3px 10px #ffffff;\n transform: translateX(-0.5em) translateY(-0.5em);\n}\n\n.form .btn:active {\n transition: .2s;\n transform: translateX(0em) translateY(0em);\n box-shadow: none;\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"63895a","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":217,"cssLen":969,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n position: relative;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: 10px;\n width: 300px;\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n box-shadow: 0 30px 30px -30px rgba(27, 26, 26, 0.315);\n}\n\n.form .title {\n color: royalblue;\n font-size: 30px;\n font-weight: 600;\n letter-spacing: -1px;\n line-height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.form input {\n outline: 0;\n border: 1px solid rgb(219, 213, 213);\n padding: 8px 14px;\n border-radius: 8px;\n width: 100%;\n height: 50px;\n}\n\n.form textarea {\n border-radius: 8px;\n height: 100px;\n width: 100%;\n resize: none;\n outline: 0;\n padding: 8px 14px;\n border: 1px solid rgb(219, 213, 213);\n}\n\n.form button {\n align-self: flex-end;\n padding: 8px;\n outline: 0;\n border: 0;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 500;\n background-color: royalblue;\n color: #fff;\n cursor: pointer;\n}\n "},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"1239c6","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2971,"cssLen":2018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Shipping Label Address Form

\n\n

\n Name\n \n

\n\n

\n Address\n \n

\n\n

\n City\n \n

\n\n

\n State\n \n

\n\n

\n ZIP\n \n

\n\n

\n Country\n \n

\n \n

","css":".mt-4 {\n margin-top: 1rem\n}\n\n.flex {\n display: flex\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-700 {\n --tw-border-opacity: 1;\n border-color: rgb(55 65 81 / var(--tw-border-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-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / 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-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\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.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / 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.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-200 {\n transition-duration: 200ms\n}\n\n.hover\\:bg-blue-500:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"583a53","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2082,"cssLen":1932,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

Sign in to Twitter

\n \n \n \n

\n Don't have an account?\n Sign up\n

\n \n\n","css":".mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.h-12{height:3rem}.w-12{width:3rem}.w-full{width:100%}.flex-col{flex-direction:column}.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-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-\\[4px\\]{border-width:4px}.border-blue-900{--tw-border-opacity:1;border-color:rgb(30 58 138 / var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.p-2{padding:0.5rem}.px-12{padding-left:3rem;padding-right:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.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))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.hover\\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\\:border-blue-700:focus{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}"},{"created":"2024-01-22T17:20:14.000Z","isPrivate":0,"projectId":"2d0cb0","snapshot":null,"tags":null,"title":"form by ahmed150up","updated":"2024-01-22T17:20:14.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2471,"cssLen":1572,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Song Title

Artist

\n \n \n \n \n

\n","css":".audio-player {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 300px;\n height: 80px;\n background-color: #f3f3f3;\n border-radius: 8px;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.player-controls {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n\n.song-info {\n margin-bottom: 4px;\n}\n\n.song-title {\n font-size: 16px;\n color: #333;\n margin: 0;\n}\n\n.artist {\n font-size: 12px;\n color: #666;\n margin: 0;\n}\n\n.progress-bar {\n width: 100%;\n height: 4px;\n background-color: #ddd;\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress {\n width: 0;\n height: 100%;\n background-color: #ff5500;\n animation: progress-animation 10s linear infinite;\n}\n\n.buttons {\n display: flex;\n align-items: center;\n margin-top: 4px;\n}\n\nbutton {\n background: none;\n border: none;\n cursor: pointer;\n outline: none;\n}\n\n.play-btn,\n.pause-btn,\n.skip-btn,\n.volume-btn {\n font-size: 16px;\n color: #666;\n margin-right: 8px;\n transition: transform 0.2s ease-in-out;\n}\n\n.play-btn:hover,\n.pause-btn:hover,\n.skip-btn:hover,\n.volume-btn:hover {\n transform: scale(1.2);\n}\n\n.volume-slider {\n width: 100px;\n height: 5px;\n background-color: #ccc;\n position: relative;\n margin-left: 10px;\n}\n\n.volume-slider-bar {\n height: 100%;\n background-color: #666;\n}\n\n.volume-slider-handle {\n width: 16px;\n height: 16px;\n background-color: #666;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n cursor: pointer;\n}\n\n@keyframes progress-animation {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 100%;\n }\n}\n"}]}},"actionData":null,"errors":null}