{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":158,"projects":[{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"08ab37","snapshot":null,"tags":null,"title":"input by boryanakrasteva","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":602,"jsLen":0,"cssLen":1112,"pureCSS":1,"html":"

\n \n \n

","css":".input-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 15px;\n position: relative;\n}\n\n.input {\n border-style: none;\n height: 50px;\n width: 50px;\n padding: 10px;\n outline: none;\n border-radius: 50%;\n transition: .5s ease-in-out;\n background-color: #7e4fd4;\n box-shadow: 0px 0px 3px #f3f3f3;\n padding-right: 40px;\n color: #fff;\n}\n\n.input::placeholder,\n.input {\n font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\n font-size: 17px;\n}\n\n.input::placeholder {\n color: #8f8f8f;\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0px;\n cursor: pointer;\n width: 50px;\n height: 50px;\n outline: none;\n border-style: none;\n border-radius: 50%;\n pointer-events: painted;\n background-color: transparent;\n transition: .2s linear;\n}\n\n.icon:focus ~ .input,\n.input:focus {\n box-shadow: none;\n width: 250px;\n border-radius: 0px;\n background-color: transparent;\n border-bottom: 3px solid #7e4fd4;\n transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);\n}\n\n\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"09bcf2","snapshot":null,"tags":null,"title":"input by ElsayedShamsEldeen","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":134,"jsLen":0,"cssLen":1192,"pureCSS":1,"html":"

\n \n User name\n

\n","css":".container {\n display: flex;\n flex-direction: column;\n gap: 7px;\n position: relative;\n color: white;\n}\n\n.container .label {\n font-size: 15px;\n padding-left: 10px;\n position: absolute;\n top: 13px;\n transition: 0.3s;\n pointer-events: none;\n}\n\n.input {\n width: 200px;\n height: 45px;\n border: none;\n outline: none;\n padding: 0px 7px;\n border-radius: 6px;\n color: #fff;\n font-size: 15px;\n background-color: transparent;\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n\n.input:focus {\n border: 2px solid transparent;\n color: #fff;\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1),\n inset -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n\n.container .input:valid ~ .label,\n.container .input:focus ~ .label {\n transition: 0.3s;\n padding-left: 2px;\n transform: translate(15px, -27px);\n letter-spacing: 5px;\n font-weight: bold;\n}\n\n.container .input:valid,\n.container .input:focus {\n box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),\n -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1),\n inset -1px -1px 6px rgba(255, 255, 255, 0.4);\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"1123c1","snapshot":null,"tags":null,"title":"input by ozgeozkaraa01","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":67,"jsLen":0,"cssLen":281,"pureCSS":1,"html":"","css":".input {\n font-weight: 500;\n font-size: 14px;\n height: 40px;\n border-radius: 10px;\n padding-left: 10px;\n border: none;\n border-bottom: 1px solid #e5e5e5;\n outline: none;\n}\n\n.input:focus {\n border-bottom: 1px solid #6941c6;\n -webkit-transition: 0.1s;\n transition: 0.5s;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"2381d0","snapshot":null,"tags":null,"title":"input by Darlley","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1385,"jsLen":0,"cssLen":2477,"pureCSS":1,"html":"

\n \n

\n\n

\n 0:00\n

\n\n

\n \n

\n\n

","css":".audio.green-audio-player {\n width: 400px;\n min-width: 300px;\n height: 56px;\n box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-left: 24px;\n padding-right: 24px;\n border-radius: 4px;\n user-select: none;\n -webkit-user-select: none;\n background-color: #fff;\n}\n\n.audio.green-audio-player .play-pause-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .slider {\n flex-grow: 1;\n background-color: #d8d8d8;\n cursor: pointer;\n position: relative;\n}\n\n.audio.green-audio-player .slider .progress {\n background-color: #44bfa3;\n border-radius: inherit;\n position: absolute;\n pointer-events: none;\n}\n\n.audio.green-audio-player .slider .progress .pin {\n height: 16px;\n width: 16px;\n border-radius: 8px;\n background-color: #44bfa3;\n position: absolute;\n pointer-events: all;\n box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n\n.audio.green-audio-player .controls {\n font-family: \"Roboto\", sans-serif;\n font-size: 16px;\n line-height: 18px;\n color: #55606e;\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n margin-left: 24px;\n margin-right: 24px;\n}\n\n.audio.green-audio-player .controls .slider {\n margin-left: 16px;\n margin-right: 16px;\n border-radius: 2px;\n height: 4px;\n}\n\n.audio.green-audio-player .controls .slider .progress {\n width: 0;\n height: 100%;\n}\n\n.audio.green-audio-player .controls .slider .pin {\n right: -8px;\n top: -6px;\n}\n\n.audio.green-audio-player .controls span {\n cursor: default;\n}\n\n.audio.green-audio-player .volume {\n position: relative;\n}\n\n.audio.green-audio-player .volume .volume-btn {\n cursor: pointer;\n}\n\n.audio.green-audio-player .volume .volume-btn .open path {\n fill: #44bfa3;\n}\n\n.audio.green-audio-player .volume .volume-controls {\n width: 30px;\n height: 135px;\n background-color: rgba(0, 0, 0, 0.62);\n border-radius: 7px;\n position: absolute;\n left: -3px;\n bottom: 52px;\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.audio.green-audio-player .volume .volume-controls.hidden {\n display: none;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider {\n margin-top: 12px;\n margin-bottom: 12px;\n width: 6px;\n border-radius: 3px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress {\n bottom: 0;\n height: 100%;\n width: 6px;\n}\n\n.audio.green-audio-player .volume .volume-controls .slider .progress .pin {\n left: -5px;\n top: -8px;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"2d2c31","snapshot":null,"tags":null,"title":"input by saidbl1","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":119,"jsLen":0,"cssLen":472,"pureCSS":1,"html":"

\n \n First name :\n

","css":".inputBox {\n position: relative;\n}\n\n.inputBox input {\n padding: 15px 20px;\n outline: none;\n background: transparent;\n border-radius: 5px;\n color: #e8e8e8;\n border: 1px solid#e8e8e8;\n font-size: 1em;\n}\n\n.inputBox span {\n position: absolute;\n left: 0;\n font-size: 0.7em;\n transform: translateX(14px) translateY(-7.5px);\n padding: 0 6px 1px 5px;\n border-radius: 2px;\n background: #212121;\n letter-spacing: 1px;\n border: 1px solid #e8e8e8;\n color: #e8e8e8;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"46ba8c","snapshot":null,"tags":null,"title":"input by Christardev","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":85,"jsLen":0,"cssLen":301,"pureCSS":1,"html":"","css":".password {\n outline: none;\n max-width: 190px;\n padding: 8px;\n background-color: #d4cbcb;\n border-radius: 12px;\n border: 4px solid #000000;\n width: auto;\n font-weight: bold;\n font-style: italic;\n}\n\n.password:hover {\n background-color: #6ad5f0;\n outline: none;\n border: 4px solid #000000;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"4f02a2","snapshot":null,"tags":null,"title":"input by Codewithvinay","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":93,"jsLen":0,"cssLen":708,"pureCSS":1,"html":"","css":".input {\n /* fallback for old browsers */\n background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);\n /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);\n /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n background-repeat: no-repeat;\n border-radius: 89% 29% 90% 23% / 0% 100% 0% 100%;\n border-color: transparent;\n width: 200px;\n height: 50px;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-weight: 500;\n font-family: inherit;\n box-shadow: 23px 23px 46px #bebebe,\n -23px -23px 46px #ffffff;\n}\n\n.input::placeholder {\n color: white;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"66a262","snapshot":null,"tags":null,"title":"input by rricol","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":207,"jsLen":0,"cssLen":975,"pureCSS":1,"html":"

\n Email\n \n enter a valid email\n

","css":".input {\n position: relative;\n max-width: 190px;\n border: none;\n box-shadow: 0px 1.5px 0px 0px #858585;\n padding: .5rem;\n transition: all 200ms ease-in-out;\n opacity: .8;\n}\n\n.input-box {\n display: flex;\n flex-direction: column;\n}\n\n.input-label {\n font-size: .625rem;\n font-weight: bold;\n color: #858585;\n margin-bottom: 4px;\n margin-left: 1px;\n}\n\n.input-helper {\n color: #858585;\n font-size: .5rem;\n margin-top: 6px;\n margin-left: 1px;\n visibility: hidden;\n transform: translateY(-.5rem);\n transition: all 100ms linear;\n z-index: -1;\n}\n\n.input::placeholder {\n color: rgb(145, 145, 145);\n font-size: .75rem;\n}\n\n.input::after {\n content: attr(placeholder);\n position: absolute;\n color: #161616;\n top: 0;\n left: 0;\n}\n\n.input:focus {\n border: none;\n box-shadow: 0px 1.5px 0px 0px #72E985;\n outline: none;\n}\n\n.input:focus + .input-helper {\n visibility: visible;\n transform: translateY(0rem);\n}\n\n.input:focus::placeholder {\n visibility: hidden;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"78dcb9","snapshot":null,"tags":null,"title":"input by Sunhotep","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":173,"jsLen":0,"cssLen":1057,"pureCSS":1,"html":"

\n \n Ask Ptah\n

","css":".form__group {\n position: relative;\n padding: 20px 0 0;\n width: 100%;\n max-width: 180px;\n}\n\n.form__field {\n font-family: inherit;\n width: 100%;\n border: none;\n border-bottom: 2px solid #6b6b6b;\n outline: 0;\n font-size: 17px;\n color: #fff;\n padding: 7px 0;\n background: transparent;\n transition: border-color 0.2s;\n}\n\n.form__field::placeholder {\n color: transparent;\n}\n\n.form__field:placeholder-shown ~ .form__label {\n font-size: 17px;\n cursor: text;\n top: 20px;\n}\n\n.form__label {\n position: absolute;\n top: 0;\n display: block;\n transition: 0.2s;\n font-size: 17px;\n color: #FFE699;\n pointer-events: none;\n}\n\n.form__field:focus {\n padding-bottom: 6px;\n font-weight: 700;\n border-width: 3px;\n border-image: linear-gradient(to right, #FFE699, #5D3294);\n border-image-slice: 1;\n}\n\n.form__field:focus ~ .form__label {\n position: absolute;\n top: 0;\n display: block;\n transition: 0.2s;\n font-size: 17px;\n color: #FFE699;\n font-weight: 700;\n}\n\n/* reset input */\n.form__field:required, .form__field:invalid {\n box-shadow: none;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"92e555","snapshot":null,"tags":null,"title":"input by doniaskima","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":173,"jsLen":0,"cssLen":844,"pureCSS":1,"html":"

\n \n Your Name\n

\n","css":".inputContainer {\n position: relative;\n margin-bottom: 20px;\n}\n\n.customInput {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n background-color: transparent;\n border: none;\n border-bottom: 2px solid #007bff;\n outline: none;\n transition: border-color 0.3s ease;\n color: #007bff;\n}\n\n.customInput:focus,\n.customInput:not(:placeholder-shown) {\n border-color: #0056b3;\n}\n\n.inputLabel {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n padding: 5px;\n font-size: 16px;\n color: #007bff;\n transition: transform 0.3s ease, color 0.3s ease;\n}\n\n.customInput:focus + .inputLabel,\n.customInput:not(:placeholder-shown) + .inputLabel {\n transform: translateY(-100%) translateX(-5px) scale(0.8);\n}\n\n.inputUnderline {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #007bff;\n}\n"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"a1a35d","snapshot":null,"tags":null,"title":"input by JaydipPrajapati1910","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":68,"jsLen":0,"cssLen":370,"pureCSS":1,"html":"","css":".input {\n max-width: 190px;\n border: none;\n outline: none;\n background: none;\n font-size: 18px;\n color: #555;\n padding: 15px 5px 10px 20px;\n box-shadow: inset 8px 8px 8px #cbced1,\n inset -8px -8px 8px #ffffff;\n border-radius: 25px;\n}\n\n.input::placeholder {\n color: #555;\n transition: all 0.3s ease;\n}\n\n.input:focus::placeholder {\n color: #999;\n}"},{"created":"2024-01-22T17:16:07.000Z","isPrivate":0,"projectId":"a39058","snapshot":null,"tags":null,"title":"input by marcos700x","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":91,"jsLen":0,"cssLen":999,"pureCSS":1,"html":"

\n \n

","css":".containerInput {\n background-color: #000;\n position: relative;\n overflow: hidden;\n margin: 0;\n padding: 0 0 4px 0;\n z-index: 1;\n font-size: 15px;\n}\n\n.containerInput::before {\n content: '';\n width: 110%;\n aspect-ratio: 1;\n position: absolute;\n inset: 0 0 0 0;\n margin: auto;\n animation: rotate6234 2.5s ease-in-out infinite;\n z-index: -1;\n background-image: conic-gradient(from 0deg at 50% 50%, #073AFF00 0%, #FF0000FF 25%, #073AFF00 25%);\n}\n\n.containerInput > input {\n width: 210px;\n height: 50px;\n font-size: inherit;\n color: #fff;\n border: none;\n padding: 12px;\n background-color: #0a0a0a;\n outline: 5px solid #0a0a0a;\n}\n\n.containerInput > input:focus {\n outline: none;\n}\n\n.containerInput > input:not(:placeholder-shown) {\n outline: none;\n}\n\n.containerInput > input:not(:placeholder-shown):valid {\n outline: 4px solid rgb(0, 255, 183);\n border-radius: 0;\n}\n\n@keyframes rotate6234 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}"}]}},"actionData":null,"errors":null}