{"loaderData":{"0":null,"0-3":{"total":7517,"projects":[{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"5d9386","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":639,"cssLen":1515,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Email\n \n

\n","css":".flex{display:flex}.grid{display:grid}.h-10{height:2.5rem}.w-full{width:100%}.max-w-xs{max-width:20rem}.items-center{align-items:center}.gap-1{gap:0.25rem}.gap-1\\.5{gap:0.375rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-none{line-height:1}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.file\\:border-0::file-selector-button{border-width:0px}.file\\:bg-transparent::file-selector-button{background-color:transparent}.file\\:text-sm::file-selector-button{font-size:0.875rem;line-height:1.25rem}.file\\:font-medium::file-selector-button{font-weight:500}.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-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:0.5}.peer:disabled ~ .peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled ~ .peer-disabled\\:opacity-70{opacity:0.7}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"db8289","snapshot":null,"tags":null,"title":"input by Javierrocadev","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":630,"cssLen":2899,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".relative{position:relative}.block{display:block}.w-64{width:16rem}.w-full{width:100%}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.bg-transparent{background-color:transparent}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.placeholder-violet-700::placeholder{--tw-placeholder-opacity:1;color:rgb(109 40 217 / var(--tw-placeholder-opacity))}.placeholder-opacity-60::placeholder{--tw-placeholder-opacity:0.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--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(0px + 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)}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);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-3::after{content:var(--tw-content);top:0.75rem}.after\\:-z-10::after{content:var(--tw-content);z-index:-10}.after\\:h-20::after{content:var(--tw-content);height:5rem}.after\\:w-20::after{content:var(--tw-content);width:5rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-lg::after{content:var(--tw-content);--tw-blur:blur(16px);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)}.checked\\:bg-emerald-500:checked{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.focus\\:border-violet-500:focus{--tw-border-opacity:1;border-color:rgb(139 92 246 / var(--tw-border-opacity))}.focus\\:ring-violet-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(139 92 246 / var(--tw-ring-opacity))}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"3ddfdb","snapshot":null,"tags":null,"title":"input by omriluz","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":971,"cssLen":857,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n","css":".pointer-events-none{pointer-events:none}.flex{display:flex}.h-10{height:2.5rem}.w-10{width:2.5rem}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-e-lg{border-start-end-radius:0.5rem;border-end-end-radius:0.5rem}.rounded-s-lg{border-start-start-radius:0.5rem;border-end-start-radius:0.5rem}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.indent-2{text-indent:0.5rem}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"249b50","snapshot":null,"tags":null,"title":"input by AtharvaMistry","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1156,"cssLen":1920,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Your Input Label\n

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

\n\n","css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0px;bottom:0px}.right-0{right:0px}.mb-1{margin-bottom:0.25rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:0.25rem}.block{display:block}.flex{display:flex}.h-6{height:1.5rem}.w-6{width:1.5rem}.w-full{width:100%}.items-center{align-items:center}.rounded-md{border-radius:0.375rem}.border-2{border-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.p-4{padding:1rem}.pr-3{padding-right:0.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-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}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.focus\\:border-blue-700:focus{--tw-border-opacity:1;border-color:rgb(29 78 216 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"217c4d","snapshot":null,"tags":null,"title":"input by catraco","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":889,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

Title

\n \n \n

","css":".container {\n --light: rgb(255, 255, 255);\n --dark: rgb(50, 50, 50);\n --br: 8px;\n}\n\n.container:hover .title {\n opacity: 1;\n}\n\n.input {\n background-color: transparent;\n border: 2px solid white;\n color: var(--light);\n max-width: 200px;\n padding: .5rem;\n border-radius: var(--br);\n outline: none;\n opacity: .8;\n transition: .2s ease-in-out;\n}\n\n.input:focus {\n opacity: 1;\n}\n\n.title {\n border-radius: var(--br);\n transform: translate(-50%, -150%);\n background-color: var(--light);\n transition: .2s ease-in-out;\n opacity: 0;\n color: var(--dark);\n position: absolute;\n font-size: 15px;\n font-weight: 600;\n letter-spacing: 2px;\n padding: .5rem;\n left: 50%;\n}\n\n.title::before {\n transform: translate(-50%, 50%) rotate(45deg);\n background-color: var(--light);\n position: absolute;\n z-index: -1;\n content: '';\n width: 10px;\n height: 10px;\n bottom: 0;\n left: 50%;\n}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"9dcfdb","snapshot":null,"tags":null,"title":"input by andrew-demchenk0","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":155,"cssLen":784,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Input label\n\n\n","css":".wrapper {\n position: relative;\n}\n\n.input {\n width: 190px;\n height: 35px;\n border-radius: 5px;\n border: 2px #323232 solid;\n padding: 5px 15px;\n background-color: #e8e8e8;\n font-size: 15;\n font-weight: 500;\n}\n\n.placeholder {\n width: 65%;\n position: absolute;\n top: -18px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n text-align: center;\n color: blueviolet;\n background-color: #e8e8e8;\n font-weight: 600;\n font-size: 15px;\n letter-spacing: 1.5px;\n transition: all 0.3s;\n opacity: 0;\n}\n\n.input::placeholder {\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 1px;\n}\n\n.input:focus + .placeholder {\n opacity: 1;\n}\n\n.input:focus {\n outline: 2px solid blueviolet;\n border: none;\n color: blueviolet;\n}\n\n.input:focus::placeholder {\n opacity: 0;\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"77936f","snapshot":null,"tags":null,"title":"input by MijailVillegas","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":493,"cssLen":5330,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":"/*The eye icon on the password can be stylize with any tool you want\nto use (the only way i know to do this correctly is using JS)\nthis is meant to be wide supported and it really depends on you browsers\nif i realize any way to stylize the eye it could be added in the future\nin other input type*/\n\n.container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n display: flex;\n margin: auto;\n aspect-ratio: 16/9;\n align-items: center;\n justify-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: column;\n gap: 1em;\n}\n\n.input-container {\n filter: drop-shadow(46px 36px 24px #4090b5)\n drop-shadow(-55px -40px 25px #9e30a9);\n animation: blinkShadowsFilter 8s ease-in infinite;\n}\n\n.input-content {\n display: grid;\n align-content: center;\n justify-items: center;\n align-items: center;\n text-align: center;\n padding-inline: 1em;\n}\n\n.input-content::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n filter: blur(40px);\n -webkit-clip-path: polygon(\n 26% 0,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n clip-path: polygon(\n 26% 0,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n background: rgba(122, 251, 255, 0.5568627451);\n transition: all 1s ease-in-out;\n}\n\n.input-content::after {\n content: \"\";\n position: absolute;\n width: 98%;\n height: 98%;\n box-shadow: inset 0px 0px 20px 20px #212121;\n background: repeating-linear-gradient(\n to bottom,\n transparent 0%,\n rgba(64, 144, 181, 0.6) 1px,\n rgb(0, 0, 0) 3px,\n hsl(295, 60%, 12%) 5px,\n #153544 4px,\n transparent 0.5%\n ),\n repeating-linear-gradient(\n to left,\n hsl(295, 60%, 12%) 100%,\n hsla(295, 60%, 12%, 0.99) 100%\n );\n -webkit-clip-path: polygon(\n 26% 0,\n 31% 5%,\n 61% 5%,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n clip-path: polygon(\n 26% 0,\n 31% 5%,\n 61% 5%,\n 66% 0,\n 92% 0,\n 100% 8%,\n 100% 89%,\n 91% 100%,\n 7% 100%,\n 0 92%,\n 0 0\n );\n animation: backglitch 50ms linear infinite;\n}\n\n.input-dist {\n z-index: 80;\n display: grid;\n align-items: center;\n text-align: center;\n width: 100%;\n padding-inline: 1em;\n padding-block: 1.2em;\n grid-template-columns: 1fr;\n}\n\n.input-type {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n gap: 1em;\n font-size: 1.1rem;\n background-color: transparent;\n width: 100%;\n border: none;\n}\n\n.input-is {\n color: #fff;\n font-size: 0.9rem;\n background-color: transparent;\n width: 100%;\n box-sizing: border-box;\n padding-inline: 0.5em;\n padding-block: 0.7em;\n border: none;\n transition: all 1s ease-in-out;\n border-bottom: 1px solid hsl(221, 26%, 43%);\n}\n\n.input-is:hover {\n transition: all 1s ease-in-out;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(102, 224, 255, 0.2) 27%,\n rgba(102, 224, 255, 0.2) 63%,\n transparent 100%\n );\n}\n\n.input-content:focus-within::before {\n transition: all 1s ease-in-out;\n background: hsla(0, 0%, 100%, 0.814);\n}\n\n.input-is:focus {\n outline: none;\n border-bottom: 1px solid hsl(192, 100%, 100%);\n color: hsl(192, 100%, 88%);\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(102, 224, 255, 0.2) 27%,\n rgba(102, 224, 255, 0.2) 63%,\n transparent 100%\n );\n}\n\n.input-is::-moz-placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n.input-is::placeholder {\n color: hsla(192, 100%, 88%, 0.806);\n}\n\n.submit-button {\n width: 50%;\n border: none;\n color: hsla(192, 100%, 88%, 0.806);\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(102, 224, 255, 0.2) 27%,\n rgba(102, 224, 255, 0.2) 63%,\n transparent 100%\n );\n clip-path: polygon(0 0, 85% 0%, 100% 0, 100% 15%, 100% 90%, 91% 100%, 0 100%);\n padding: 0.5em;\n animation: blinkShadowsFilter 0.5s ease-in infinite;\n transition: all 500ms;\n}\n\n.submit-button:hover {\n color: hsl(0, 0%, 100%);\n cursor: pointer;\n font-size: medium;\n font-weight: bold;\n}\n\n@keyframes backglitch {\n 0% {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n\n 50% {\n box-shadow: inset 0px -20px 20px 30px hsl(297, 42%, 10%);\n }\n\n to {\n box-shadow: inset 0px 20px 20px 30px #212121;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg) translate(-50%, 20%);\n }\n\n 50% {\n transform: rotate(180deg) translate(40%, 10%);\n }\n\n to {\n transform: rotate(360deg) translate(-50%, 20%);\n }\n}\n\n@keyframes blinkShadowsFilter {\n 0% {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))\n drop-shadow(-55px -40px 28px #9e30a9);\n }\n\n 25% {\n filter: drop-shadow(46px -36px 24px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-55px 40px 24px #9e30a9);\n }\n\n 50% {\n filter: drop-shadow(46px 36px 30px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-55px 40px 30px rgba(159, 48, 169, 0.2941176471));\n }\n\n 75% {\n filter: drop-shadow(20px -18px 25px rgba(64, 144, 181, 0.8980392157))\n drop-shadow(-20px 20px 25px rgba(159, 48, 169, 0.2941176471));\n }\n\n to {\n filter: drop-shadow(46px 36px 28px rgba(64, 144, 181, 0.3411764706))\n drop-shadow(-55px -40px 28px #9e30a9);\n }\n}\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"e3e00e","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":1233,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n max-width: 190px;\n border: none;\n outline: none;\n background: none;\n font-size: 18px;\n color: #fff;\n padding: 15px 5px 10px 20px;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4),\n inset -4px -8px 0px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(0, 0, 0, 0.3),\n 0px 2px 1px rgba(255, 255, 255, 0.1);\n transform: perspective(70px) rotateX(5deg) rotateY(0deg);\n border-radius: 10px;\n}\n\n.input::before {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));\n background-position: bottom right, bottom right;\n background-size: 100% 100%, 100% 100%;\n background-repeat: no-repeat;\n z-index: -1;\n border-radius: 15px;\n transition: all .1s ease-in-out 0s;\n}\n\n.input:focus {\n border: 2px solid #c3c6ce;\n}\n\n.input::placeholder {\n color: #fff;\n transition: all 0.3s ease;\n}\n\n.input:focus::placeholder {\n color: #999;\n}\n\n\n"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"3bf422","snapshot":null,"tags":null,"title":"input by Javierrocadev","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1378,"cssLen":3098,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n \n \n \n \n \n \n\n","css":".absolute{position:absolute}.relative{position:relative}.right-0{right:0px}.top-1{top:0.25rem}.top-1\\.5{top:0.375rem}.block{display:block}.h-8{height:2rem}.w-64{width:16rem}.w-8{width:2rem}.w-full{width:100%}.-rotate-45{--tw-rotate:-45deg;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))}.appearance-none{-webkit-appearance:none;appearance:none}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-neutral-500{--tw-border-opacity:1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.bg-neutral-700{--tw-bg-opacity:1;background-color:rgb(64 64 64 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.stroke-pink-300{stroke:#f9a8d4}.p-2{padding:0.5rem}.p-2\\.5{padding:0.625rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23 / var(--tw-text-opacity))}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182 / var(--tw-text-opacity))}.placeholder-violet-700::placeholder{--tw-placeholder-opacity:1;color:rgb(109 40 217 / var(--tw-placeholder-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--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(0px + 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)}.duration-300{transition-duration:300ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-12::before{content:var(--tw-content);height:3rem}.before\\:w-12::before{content:var(--tw-content);width:3rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-lg::before{content:var(--tw-content);--tw-blur:blur(16px);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)}.before\\:\\[box-shadow\\:-60px_20px_10px_10px_\\#F9B0B9\\]::before{content:var(--tw-content);box-shadow:-60px 20px 10px 10px #F9B0B9}.hover\\:placeholder-shown\\:bg-emerald-500:placeholder-shown:hover{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.focus\\:border-violet-500:focus{--tw-border-opacity:1;border-color:rgb(139 92 246 / var(--tw-border-opacity))}.focus\\:ring-violet-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(139 92 246 / var(--tw-ring-opacity))}.group:hover .group-hover\\:rotate-0{--tw-rotate:0deg;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))}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"a147fc","snapshot":null,"tags":null,"title":"input by Jules-gitclerc","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8369,"cssLen":1265,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

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

\n\n","css":".flex {\n display: flex;\n}\n.h-9 {\n height: 2.25rem;\n}\n.h-full {\n height: 100%;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.border {\n border-width: 1px;\n}\n.border-none {\n border-style: none;\n}\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.border-opacity-30 {\n --tw-border-opacity: 0.3;\n}\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity));\n}\n.p-1 {\n padding: 0.25rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.caret-orange-500 {\n caret-color: #f97316;\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),\n 0 2px 4px -2px 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"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"e620a8","snapshot":null,"tags":null,"title":"input by Alaner-xs","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":73,"cssLen":353,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n border: 3px solid rgb(127, 170, 170);\n border-radius: 20px;\n background-image: linear-gradient(120deg,#3c3c3c,#585858);\n color: rgb(127, 170, 170);\n cursor: pointer;\n padding: 7px 12px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 17px;\n transition: all 1s;\n max-width: 170px;\n}\n\n.input:focus {\n outline-color: rgb(127, 170, 170);\n}"},{"created":"2024-01-22T17:16:06.000Z","isPrivate":0,"projectId":"274e77","snapshot":null,"tags":null,"title":"input by jamaldine-hub","updated":"2024-01-22T17:16:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":830,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Content\n

\n","css":".container {\n position: relative;\n width: 250px;\n}\n.container .inp {\n width: 100%;\n padding: 10px;\n border: 1.5px solid rgba(0, 167, 161, 0.272);\n outline: none;\n margin-top: 20px;\n border-radius: 5px;\n color: rgba(0, 167, 181, 0.62);\n background: rgba(41, 41, 41);\n font-size: 1em;\n}\n.container .content {\n position: absolute;\n left: 0;\n margin-top: 20px;\n padding: 10px;\n text-transform: uppercase;\n font-size: 1em;\n pointer-events: none;\n color: rgba(0, 167, 161, 0.272);\n transition: 0.5s;\n}\n.container input:valid ~ span,\n.container input:focus ~ span {\n color: rgb(10, 164, 159);\n transform: translateX(10px) translateY(-7px);\n font-size: 0.9em;\n padding: 0 10px;\n background: rgb(41, 41, 41);\n border-left: 2px solid rgba(0, 167, 161, 0.272);\n border-right: 2px solid rgba(0, 167, 161, 0.272);\n}\n"}]}},"actionData":null,"errors":null}