{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"869130","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1428,"cssLen":1624,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Password Generator

\n \n Copy\n

\n Password Settings\n

\n \n Lowercase (a-z)\n
\n \n Uppercase (A-Z)\n
\n \n Numbers (0-9)\n
\n \n Symbols (!-$^+)\n
\n \n Exclude Duplicate\n
\n \n Include Spaces\n

\n \n

\n","css":".container {\n width: 450px;\n background: #8C92BB;\n border-radius: 8px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.05);\n}\n\n.container p {\n font-weight: 600;\n font-size: 1.31rem;\n padding: 1rem 1.75rem;\n border-bottom: 1px solid #858BB2;\n}\n\n.wrapper {\n margin: 1.25rem 1.75rem;\n}\n\n.wrapper .input-box {\n position: relative;\n}\n\n.input-box input {\n width: 100%;\n height: 53px;\n color: #858BB2;\n background: #858BB2;\n font-size: 1.06rem;\n font-weight: 500;\n border-radius: 4px;\n letter-spacing: 1.4px;\n border: 1px solid #000;\n padding: 0 2.85rem 0 1rem;\n}\n\n.input-box span {\n position: absolute;\n right: 13px;\n cursor: pointer;\n line-height: 53px;\n color: #000;\n}\n\n.input-box span:hover {\n color: #46495E!important;\n}\n\n.wrapper .pass-settings {\n margin: 1.56rem 0 1.25rem;\n}\n\n.pass-settings .options {\n display: flex;\n list-style: none;\n flex-wrap: wrap;\n margin-top: 1rem;\n}\n\n.pass-settings .options .option {\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n width: calc(100% / 2);\n}\n\n.options .option:first-child input {\n opacity: 0.7;\n}\n\n.options .option input {\n height: 16px;\n width: 16px;\n cursor: pointer;\n}\n\n.options .option label {\n cursor: pointer;\n color: #000;\n padding-left: 0.63rem;\n}\n\n.pass-settings input[type='checkbox'] {\n accent-color: #46496E;\n}\n\n.wrapper .generate-btn {\n width: 100%;\n color: #000;\n border: none;\n outline: none;\n cursor: pointer;\n background: #46496E;\n font-size: 1.06rem;\n padding: 0.94rem 0;\n border-radius: 5px;\n text-transform: uppercase;\n margin: 0.94rem 0 1.3rem;\n}\n\n.wrapper .generate-btn:hover {\n background: #46495E;\n}"},{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"e0d77d","snapshot":null,"tags":null,"title":"form by Yaya12085","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1889,"cssLen":4397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n Accept terms of use\n

\n \n \n

\n \n \n Submit to newsletter\n

\n \n \n

","css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.left-1{left:0.25rem}.top-1{top:0.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.w-12{width:3rem}.w-4{width:1rem}.w-80{width:20rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.p-1{padding:0.25rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-3\\.5{padding-top:0.875rem;padding-bottom:0.875rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.checked\\:border-green-300:checked{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity))}.hover\\:bg-gray-800:hover{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.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-gray-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81 / var(--tw-ring-opacity))}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\\:ring-offset-gray-800:focus{--tw-ring-offset-color:#1f2937}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-2:focus-visible{--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-visible\\:ring-gray-700:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81 / var(--tw-ring-opacity))}.focus-visible\\:ring-gray-900:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(17 24 39 / var(--tw-ring-opacity))}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;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))}.peer:checked ~ .peer-checked\\:left-7{left:1.75rem}.peer:checked ~ .peer-checked\\:bg-green-300{--tw-bg-opacity:1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}"},{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"7742b0","snapshot":null,"tags":null,"title":"form by mi-series","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1020,"cssLen":1568,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".forgot-password {\n background-color: #E8EAE3;\n max-width: 450px;\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.forgot-password .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.forgot-password .sub-title {\n margin-top: 0.4rem;\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.reset-option {\n margin-top: 1rem;\n margin-bottom: 15px;\n}\n\n.reset-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: #F7F7F7;\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.reset-option label .reset-info {\n display: flex;\n flex-direction: column;\n margin-left: 10px;\n}\n\n.reset-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n color: rgba(0, 0, 0, 1);\n}\n\n.reset-sub-title {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.reset-option input:checked + label {\n border-color: #FA2742;\n}\n\n.send-btn {\n text-decoration: none;\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n background-color: #FA2742;\n padding: 1rem 3rem;\n font-weight: 600;\n color: #000;\n transform: all .15s ease;\n}\n\n.send-btn:hover {\n opacity: .9;\n}\n\n.reset-option input {\n display: none;\n}\n\n.resend {\n color: #FA2742;\n font-weight: 600;\n}"},{"created":"2024-01-22T17:20:15.000Z","isPrivate":0,"projectId":"2567ca","snapshot":null,"tags":null,"title":"form by themrsami","updated":"2024-01-22T17:20:15.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":881,"cssLen":3661,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Subscribe to Our Newsletter

\n\n \n\n

\n Privacy Policy\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-green-500 {\n --tw-gradient-from: #22c55e var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-500 {\n --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity))\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / 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-green-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity))\n}\n\n.hover\\:to-blue-600:hover {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.hover\\:underline:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline\n}\n\n.focus\\:bg-gray-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: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}"}]}},"actionData":null,"errors":null}