{"loaderData":{"0":null,"0-3":{"total":7264,"projects":[{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"0507a9","snapshot":null,"tags":null,"title":"input by OnCloud125252","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":551,"cssLen":499,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".inputBox_container {\n display: flex;\n align-items: center;\n flex-direction: row;\n max-width: 14em;\n width: fit-content;\n height: fit-content;\n background-color: #5c6370;\n border-radius: 0.8em;\n overflow: hidden;\n}\n\n.search_icon {\n height: 1em;\n padding: 0 0.5em 0 0.8em;\n fill: #abb2bf;\n}\n\n.inputBox {\n background-color: transparent;\n color: #ffffff;\n outline: none;\n width: 100%;\n border: 0;\n padding: 0.5em 1.5em 0.5em 0;\n font-size: 1em;\n}\n\n::placeholder {\n color: #abb2bf;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"7f4d64","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":933,"cssLen":2458,"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","css":".absolute{position:absolute}.relative{position:relative}.inset-y-1{top:0.25rem;bottom:0.25rem}.right-1{right:0.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.aspect-square{aspect-ratio:1 / 1}.h-full{height:100%}.w-4{width:1rem}.w-full{width:100%}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.bg-neutral-950{--tw-bg-opacity:1;background-color:rgb(10 10 10 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-6{padding-left:1.5rem}.pr-20{padding-right:5rem}.text-base\\/6{font-size:1rem;line-height:1.5rem}.text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-transparent{--tw-ring-color:transparent}.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}.placeholder\\:text-neutral-500::placeholder{--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity))}.hover\\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38 / var(--tw-bg-opacity))}.focus\\:border-neutral-950:focus{--tw-border-opacity:1;border-color:rgb(10 10 10 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-neutral-950\\/5:focus{--tw-ring-color:rgb(10 10 10 / 0.05)}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"49df95","snapshot":null,"tags":null,"title":"input by laminelawal","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":333,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n padding: 10px;\n width: 120px;\n border: none;\n outline: none;\n border-radius: 5px;\n box-shadow: 0 1px gray;\n font-size: 18px;\n transition: width 0.3s;\n font-family: Consolas,monaco,monospace;\n}\n\n.input:focus {\n outline: 1px solid blue;\n box-shadow: none;\n width: 230px;\n}\n\n.input::placeholder {\n color: blue;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1d9f5f","snapshot":null,"tags":null,"title":"input by elijahgummer","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":80,"cssLen":535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n width: 200px;\n padding: 12px;\n border: 2px solid #3498db;\n border-radius: 8px;\n outline: none;\n font-size: 18px;\n transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;\n background-color: #fff;\n color: #333;\n box-sizing: border-box;\n}\n\n.input:focus {\n border-color: #2980b9;\n box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);\n transform: scale(1.02);\n}\n\n/* Placeholder Styling */\n.input::placeholder {\n color: #aaa;\n font-style: italic;\n}\n\n/* Hover Effect */\n.input:hover {\n background-color: #f0f8ff;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"dcd16a","snapshot":null,"tags":null,"title":"input by akshat-patel28","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":488,"cssLen":1614,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

","css":".input-div {\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n border: 2px solid rgb(1, 235, 252);\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n animation: flicker 2s linear infinite;\n}\n\n.icon {\n color: rgb(1, 235, 252);\n font-size: 2rem;\n cursor: pointer;\n animation: iconflicker 2s linear infinite;\n}\n\n.input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n cursor: pointer !important;\n}\n\n@keyframes flicker {\n 0% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 5% {\n border: none;\n box-shadow: none;\n }\n\n 10% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 25% {\n border: none;\n box-shadow: none;\n }\n\n 30% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n\n 100% {\n border: 2px solid rgb(1, 235, 252);\n box-shadow: 0px 0px 100px rgb(1, 235, 252) , inset 0px 0px 10px rgb(1, 235, 252),0px 0px 5px rgb(255, 255, 255);\n }\n}\n\n@keyframes iconflicker {\n 0% {\n opacity: 1;\n }\n\n 5% {\n opacity: 0.2;\n }\n\n 10% {\n opacity: 1;\n }\n\n 25% {\n opacity: 0.2;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"0ba344","snapshot":null,"tags":null,"title":"input by vinodjangid07","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n\n

","css":".InputContainer {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(8, 8, 8);\n overflow: hidden;\n padding: 0px 5px 0px 15px;\n border: 1px solid rgba(255, 255, 255, 0.322);\n border-radius: 10px;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);\n}\n\n.input {\n width: 170px;\n height: 100%;\n border: none;\n outline: none;\n font-size: 0.9em;\n caret-color: rgb(255, 81, 0);\n background-color: rgb(8, 8, 8);\n font-weight: 600;\n color: white;\n}\n\n.visaCard {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 40px;\n height: 25px;\n background-color: rgb(8, 8, 8);\n pointer-events: none;\n border: 1px solid rgba(255, 255, 255, 0.068);\n border-radius: 7px;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"1cd8d7","snapshot":null,"tags":null,"title":"input by SSpisso","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":75,"cssLen":511,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".input {\n background-color: #383838;\n border: 1ex solid none;\n border-top-width: 1.7em;\n margin: 0;\n padding: 0;\n color: #383838;\n word-wrap: break-word;\n outline: 7px solid #383838;\n height: 30px;\n font-size: 17px;\n text-align: center;\n transition: all .5s;\n max-width: 190px;\n font-weight: bold;\n font-family: 'Courier New', Courier, monospace;\n}\n\n.input:hover {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}\n\n.input:focus {\n border-top-width: 0.2em;\n background-color: #f1e8e8;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"ce2486","snapshot":null,"tags":null,"title":"input by absoluteSTrange","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":39,"cssLen":983,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"input {\n display: inline-block;\n max-width: 196px;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n padding: 10px 20px;\n border: 5px solid #1fbc00;\n -webkit-border-radius: 11px;\n border-radius: 11px;\n font: normal 19px/normal \"Courier New\", Courier, monospace;\n color: rgba(42,255,0,1);\n -o-text-overflow: clip;\n text-overflow: clip;\n background: rgba(45,45,45,1);\n box-shadow: 0 0 9px 4px rgba(0,0,0,0.15) , -1px 4px 8px -1px rgba(0,0,0,0.49) inset;\n text-shadow: 1px 1px 0 rgba(255,255,255,0.66);\n transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);\n -webkit-transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n transform: rotateX(-16.62deg) rotateY(-28.64788975654116deg);\n}\n\ninput:hover {\n -webkit-transform: rotateX(-15.62deg) rotateY(-23.65deg);\n transform: rotateX(-15.62deg) rotateY(-23.65deg);\n}\n\n.search__icon {\n height: 1.3em;\n width: 1.3em;\n fill: #b4b4b4;\n}\n\ninput:focus {\n outline: none;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"41f87f","snapshot":null,"tags":null,"title":"input by DellBee","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":297,"cssLen":1987,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Enter Text\n

","css":"/* use it in dark theme */\n.input-container {\n position: relative;\n margin: 50px auto;\n width: 190px;\n}\n\n.input-container input[type=\"text\"] {\n font-size: 20px;\n color: rgb(255, 255, 255);\n border: none;\n border-bottom: 2px solid #a5a2a2;\n outline: none;\n width: 100%;\n background-color: transparent;\n}\n\n.label {\n transition: all 0.3s ease;\n color: #d3d2d2;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.input-container input[type=\"text\"]:focus~.label,\n .input-container input[type=\"text\"]:valid~.label {\n top: -20px;\n transition: 0.3s;\n color: rgb(172, 46, 172);\n}\n\n.input-container .underline {\n position: absolute;\n bottom: 4px;\n left: -7px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .sideline {\n position: relative;\n bottom: 15px;\n right: 18px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container .upperline {\n position: absolute;\n bottom: 30px;\n left: -8px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .line {\n position: relative;\n bottom: 17px;\n left: 178px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container input[type=\"text\"]:focus~.underline,\n .input-container input[type=\"text\"]:valid~.underline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.sideline,\n .input-container input[type=\"text\"]:valid~.sideline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.upperline,\n .input-container input[type=\"text\"]:valid~.upperline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.line,\n .input-container input[type=\"text\"]:valid~.line {\n transform: scaleX(1);\n transition: 1s;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"b42214","snapshot":null,"tags":null,"title":"input by ErzenXz","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":77,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n background-color: #F4F4F4;\n border: none;\n border-radius: 10px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n color: #333;\n font-family: \"Helvetica Neue\", sans-serif;\n font-size: 16px;\n padding: 10px;\n width: 100%;\n max-width: 200px;\n height: 50px;\n line-height: 30px;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n transition: background-color 0.3s ease-in-out;\n}\n\n.input:focus {\n background-color: #EAEAEA;\n}\n\n.input:disabled {\n background-color: #DADADA;\n color: #A3A3A3;\n}\n\n.input:read-only {\n background-color: #F4F4F4;\n color: #A3A3A3;\n cursor: not-allowed;\n}"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"dc3982","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":501,"cssLen":667,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".group {\n display: flex;\n line-height: 28px;\n align-items: center;\n position: relative;\n max-width: 190px;\n}\n\n.input {\n width: 100%;\n height: 40px;\n line-height: 28px;\n padding: 0 1rem;\n padding-left: 2.5rem;\n border: 2px solid transparent;\n border-radius: 8px;\n outline: none;\n background-color: #f3f3f4;\n color: #0d0c22;\n transition: 0.3s ease;\n}\n\n.input::placeholder {\n color: #9e9ea7;\n}\n\n.input:focus,\ninput:hover {\n outline: none;\n border-color: rgba(234, 226, 183, 0.4);\n background-color: #fff;\n box-shadow: 0 0 0 4px rgb(234 226 183 / 10%);\n}\n\n.icon {\n position: absolute;\n left: 1rem;\n fill: #9e9ea7;\n width: 1rem;\n height: 1rem;\n}\n"},{"created":"2024-01-22T17:16:00.000Z","isPrivate":0,"projectId":"e66984","snapshot":null,"tags":null,"title":"input by emmanuelh-dev","updated":"2024-01-22T17:16:00.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":260,"cssLen":1018,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".block{display:block}.w-full{width:100%}.max-w-\\[220px\\]{max-width:220px}.appearance-none{-webkit-appearance:none;appearance:none}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.placeholder\\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.focus\\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:text-sm{font-size:0.875rem;line-height:1.25rem}}"}]}},"actionData":null,"errors":null}