{"loaderData":{"0":null,"0-2":{"total":7178,"projects":[{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"95a58c","snapshot":null,"tags":null,"title":"input by SARAN2004","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":533,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n","css":".input {\n max-width: 190px;\n height: 45px;\n width: 100%;\n outline: none;\n font-size: 16px;\n border-radius: 5px;\n padding-left: 15px;\n border: 1px solid #ccc;\n border-bottom-width: 2px;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.input:valid {\n border-color: #00ff2a;\n color: #00ff2a;\n box-shadow: 2px 2px 8px 1px #00ff2a;\n}\n\n.input:invalid {\n border-color: #ff0000;\n color: #ff0000;\n box-shadow: 2px 2px 8px 1px #ff0000;\n /* translate: -8px 8px 0px 0px; */\n}\n\n.text {\n margin-top: 10px;\n color: black;\n}\n"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"e1b03f","snapshot":null,"tags":null,"title":"input by Jules-gitclerc","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2015,"cssLen":1670,"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","css":".relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-3{margin-bottom:0.75rem}.flex{display:flex}.h-10{height:2.5rem}.h-9{height:2.25rem}.w-14{width:3.5rem}.w-full{width:100%}.max-w-xs{max-width:20rem}.flex-grow{flex-grow:1}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-none{border-style:none}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.border-opacity-20{--tw-border-opacity:0.2}.border-opacity-30{--tw-border-opacity:0.3}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.p-4{padding:1rem}.pl-2{padding-left:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.caret-orange-500{caret-color:#f97316}.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)}.outline-none{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:16:02.000Z","isPrivate":0,"projectId":"8bb40e","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:02.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":501,"cssLen":663,"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(247, 127, 0, 0.4);\n background-color: #fff;\n box-shadow: 0 0 0 4px rgb(247 127 0 / 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:01.000Z","isPrivate":0,"projectId":"56d103","snapshot":null,"tags":null,"title":"input by LightAndy1","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":54,"cssLen":374,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n margin-top: 1rem;\n border-radius: 10px;\n outline: 2px solid #00a6fb;\n border: 0;\n font-family: \"Montserrat\", sans-serif;\n background-color: #d6f1ff;\n outline-offset: 3px;\n padding: 10px 12.5px;\n transition: all 0.2s ease;\n width: 250px;\n}\n\n.input:hover {\n background-color: #fff;\n}\n\n.input:focus {\n outline-offset: -6px;\n background-color: #d6f1ff;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"36dbab","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":64,"cssLen":386,"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: #222;\n padding: 15px 5px 10px 20px;\n box-shadow: Inset 0 1px 25px rgba(0, 0, 0, 0.55);\n border-radius: 25px;\n}\n\n.input:focus {\n border: 2px solid #c3c6ce;\n}\n\n.input::placeholder {\n color: #555;\n transition: all 0.3s ease;\n}\n\n.input:focus::placeholder {\n color: #999;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"fac7e1","snapshot":null,"tags":null,"title":"input by santhoshsj-dev","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":139,"cssLen":602,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".input-wrapper {\n position: relative;\n width: 200px;\n margin: 50px auto;\n}\n\n.input-box {\n font-size: 16px;\n padding: 10px 0;\n border: none;\n border-bottom: 2px solid #ccc;\n color: #08AEEA;\n width: 100%;\n background-color: transparent;\n transition: border-color 0.3s ease-in-out;\n}\n\n.underline {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #08AEEA;\n transform: scaleX(0);\n transition: transform 0.3s ease-in-out;\n}\n\n.input-box:focus {\n border-color: #08AEEA;\n outline: none;\n}\n\n.input-box:focus + .underline {\n transform: scaleX(1);\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"e3f1df","snapshot":null,"tags":null,"title":"input by Akshdeep74644","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":849,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n You'r name\n \n

","css":".container {\n position: relative;\n width: 200px;\n}\n\n.container input {\n width: 100%;\n background: transparent;\n outline: none;\n border: none;\n color: #222;\n padding: 8px;\n}\n\n.container label {\n position: absolute;\n left: 0;\n top: 0;\n color: rgba(105, 105, 105, 0.7);\n text-transform: uppercase;\n pointer-events: none;\n transition: .5s;\n font-weight: bold;\n}\n\n.container input:valid ~ label,\n.container input:focus ~ label {\n color: rgb(10, 131, 212);\n transform: translateY(-15px);\n font-size: .6rem;\n}\n\n.container i {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 2px;\n background: #222;\n}\n\n.container i:before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);\n animation: animate 3s linear infinite;\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"2cfd85","snapshot":null,"tags":null,"title":"input by sabbircoder07","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":111,"cssLen":408,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input__email {\n width: 100%;\n padding: 12px 18px;\n font-size: 16px;\n font-family: inherit;\n box-shadow: 0 0 0 1px #f8bfbf;\n border: none;\n border-radius: 25px;\n background-color: #fff5f5;\n transition: all .3s;\n}\n\n.input__email::placeholder {\n color: #ce9797;\n font-size: 14px;\n}\n\n.input__email:focus {\n outline: none;\n box-shadow: 0 0 10px 1px #ee8c8c;\n border: none;\n transition: all .3s;\n}\n"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"557dc3","snapshot":null,"tags":null,"title":"input by leerepublik","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":82,"cssLen":412,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".input {\n width: 100%;\n max-width: 220px;\n height: 45px;\n padding: 12px;\n border-radius: 12px;\n border: 1.5px solid lightgrey;\n outline: none;\n transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);\n box-shadow: 0px 0px 20px -18px;\n}\n\n.input:hover {\n border: 2px solid lightgrey;\n box-shadow: 0px 0px 20px -17px;\n}\n\n.input:active {\n transform: scale(0.95);\n}\n\n.input:focus {\n border: 2px solid grey;\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"691f11","snapshot":null,"tags":null,"title":"input by Smit-Prajapati","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":120,"cssLen":1747,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":".input-container {\n display: flex;\n background: white;\n border-radius: 1rem;\n background: linear-gradient(135deg, #23272F 0%, #14161a 100%);\n box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;\n padding: 0.3rem;\n gap: 0.3rem;\n}\n\n.input-container input {\n border-radius: 0.8rem 0 0 0.8rem;\n background: #23272F;\n box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);\n width: 100%;\n flex-basis: 75%;\n padding: 1rem;\n border: none;\n border: 1px solid transparent;\n color: white;\n transition: all 0.2s ease-in-out;\n}\n\n.input-container input:focus {\n border: 1px solid #FFD43B;\n outline: none;\n box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);\n}\n\n.input-container button {\n flex-basis: 25%;\n padding: 1rem;\n background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);\n box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5);\n font-weight: 900;\n letter-spacing: 0.3rem;\n text-transform: uppercase;\n color: #23272F;\n border: none;\n width: 100%;\n border-radius: 0 1rem 1rem 0;\n transition: all 0.2s ease-in-out;\n}\n\n.input-container button:hover {\n background: linear-gradient(135deg, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%);\n box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);\n}\n\n@media (max-width: 500px) {\n .input-container {\n flex-direction: column;\n }\n\n .input-container input {\n border-radius: 0.8rem;\n }\n\n .input-container button {\n padding: 1rem;\n border-radius: 0.8rem;\n }\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"33264a","snapshot":null,"tags":null,"title":"input by Galahhad","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4004,"cssLen":799,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n ","css":".password-label {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.password-label svg {\n width: 15px;\n height: auto;\n color: #7c7c7c;\n}\n\n.password-label input {\n width: 100%;\n outline: none;\n background: none;\n border: 1px solid transparent;\n color: #8b8b8b;\n background: #3D3D3D;\n border-radius: 12px;\n padding: 9px 30px 9px 9px;\n transition: .2s;\n}\n\n.password-label input:hover,\n.password-label input:focus {\n border-color: #868686;\n}\n\n.password-label input:valid {\n background: #344b3a;\n border: 1px solid #00FF29;\n color: #00FF29;\n}\n\n.password-label input:valid~.open {\n display: none;\n}\n\n.password-label input:valid~.close {\n display: block;\n}\n\n.password-label svg {\n position: absolute;\n right: 9px;\n}\n\n.close {\n display: none;\n}"},{"created":"2024-01-22T17:16:01.000Z","isPrivate":0,"projectId":"0f70cd","snapshot":null,"tags":null,"title":"input by Yaya12085","updated":"2024-01-22T17:16:01.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":168,"cssLen":1310,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".input-container {\n position: relative;\n display: flex;\n height: 2.8rem;\n width: 100%;\n min-width: 200px;\n max-width: 250px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n}\n\n.input-container input {\n height: 100%;\n width: 100%;\n border-radius: 8px;\n border: 1px solid rgb(176 190 197);\n background-color: transparent;\n padding: 0.625rem 70px 0.625rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n color: rgb(69 90 100);\n outline: none;\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.input-container input:focus {\n border: 1px solid rgb(236 72 153 );\n}\n\n.invite-btn {\n position: absolute;\n width: 65px;\n right: 4px;\n top: 4px;\n bottom: 4px;\n z-index: 10;\n border-radius: 4px;\n background-color: rgb(236 72 153 );\n color: #fff;\n padding-top: .25rem;\n padding-bottom: .25rem;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n text-align: center;\n vertical-align: middle;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n border: none;\n transition: .6s ease;\n}\n\n.invite-btn:hover {\n right: 2px;\n top: 2px;\n bottom: 2px;\n border-radius: 8px;\n}\n\n.input-container input:placeholder-shown ~ .invite-btn {\n pointer-events: none;\n background-color: gray;\n opacity: 0.5;\n}"}]}},"actionData":null,"errors":null}