{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"85b7a9","snapshot":null,"tags":null,"title":"radio by aadium","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":690,"cssLen":2267,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Top
Left\n

\n\n \n\n \n Top
Right\n

\n\n
\n
\n\n \n Bottom
Left\n

\n\n \n\n \n Bottom
Right\n

\n","css":".container input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: inline-block;\n position: relative;\n cursor: pointer;\n font-size: 17px;\n width: 4em;\n height: 4em;\n user-select: none;\n border: 4px solid;\n border-image-slice: 1;\n background-color: #212121;\n}\n\nlabel {\n font-size: 12px;\n margin-top: -6px;\n font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n text-align: center;\n visibility: visible;\n}\n\n#topleft {\n border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);\n color: white\n}\n\n#topright {\n border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);\n color: white\n}\n\n#bottomleft {\n border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);\n color: white\n}\n\n#bottomright {\n border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);\n color: white\n}\n\n.selected {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n#topleft:hover {\n border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d);\n background-image: linear-gradient(-45deg, #743ad5, #d53a9d);\n}\n\n#topright:hover {\n border-image-source: linear-gradient(45deg, #743ad5, #d53a9d);\n background-image: linear-gradient(45deg, #743ad5, #d53a9d);\n}\n\n#bottomleft:hover {\n border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d);\n background-image: linear-gradient(-135deg, #743ad5, #d53a9d);\n}\n\n#bottomright:hover {\n border-image-source: linear-gradient(135deg, #743ad5, #d53a9d);\n background-image: linear-gradient(135deg, #743ad5, #d53a9d);\n}\n\n#topleft input[type=\"radio\"]:checked ~ .selected {\n box-shadow: 5px 5px 25px #743ad5,\n -5px -5px 25px #d53a9d;\n border-image-slice: 1;\n}\n\n#topright input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px 5px 25px #743ad5,\n 5px -5px 25px #d53a9d;\n border-image-slice: 1;\n}\n\n#bottomleft input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px 5px 25px #d53a9d,\n 5px -5px 25px #743ad5;\n border-image-slice: 1;\n}\n\n#bottomright input[type=\"radio\"]:checked ~ .selected {\n box-shadow: -5px -5px 25px #743ad5,\n 5px 5px 25px #d53a9d;\n border-image-slice: 1;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"37acde","snapshot":null,"tags":null,"title":"radio by JkHuger","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2059,"cssLen":1778,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".rating {\n cursor: pointer;\n}\n\n.card {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin: auto;\n -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);\n background-color: rgb(255, 255, 255);\n padding: 0.8rem;\n width: 33rem;\n}\n\n.rating-container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.4rem 0.8rem;\n width: 100%;\n}\n\n.rating {\n background-color: rgba(0, 0, 16, 0.8);\n padding: 0.4rem 0.4rem 0.1rem 0.4rem;\n border-radius: 2.2rem;\n}\n\n.rating-form {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.svg {\n fill: rgb(242, 242, 242);\n height: 3.6rem;\n width: 3.6rem;\n margin: 0.2rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.rating-form-2 svg {\n height: 3rem;\n width: 3rem;\n margin: 0.5rem;\n}\n\n#radios label {\n position: relative;\n}\n\n.super-happy, [type=\"radio\"] {\n position: absolute;\n opacity: 0;\n}\n\n.input ,[type=\"radio\"] + svg {\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n}\n\n.super-happy[class=\"super-happy\"]:hover + svg,\n.super-happy[class=\"super-happy\"]:checked + svg,\n.super-happy[class=\"super-happy\"]:focus + svg {\n fill: rgb(0, 204, 79);\n transition: 1.5s;\n}\n\n.neutral[class=\"neutral\"]:hover + svg,\n.neutral[class=\"neutral\"]:checked + svg,\n.neutral[class=\"neutral\"]:focus + svg {\n fill: rgb(232, 214, 0);\n transition: 1.5s;\n}\n\n.super-sad[class=\"super-sad\"]:hover + svg,\n.super-sad[class=\"super-sad\"]:checked + svg,\n.super-sad[class=\"super-sad\"]:focus + svg {\n fill: rgb(239, 42, 16);\n transition: 1.5s;\n}\n\n\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"300f67","snapshot":null,"tags":null,"title":"radio by Yaroslav205728","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6753,"cssLen":756,"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

","css":".input {\n display: flex;\n flex-direction: column;\n width: 200px;\n background-color: #0D1117;\n justify-content: center;\n border-radius: 5px\n}\n\n.value {\n background-color: transparent;\n border: none;\n padding: 10px;\n color: white;\n display: flex;\n position: relative;\n gap: 5px;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.value:not(:active):hover,\n.value:focus {\n background-color: #21262C;\n}\n\n.value:focus,\n.value:active {\n background-color: #1A1F24;\n outline: none;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n width: 5px;\n height: 80%;\n background-color: #2F81F7;\n border-radius: 5px;\n opacity: 0;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 15px\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"024cb5","snapshot":null,"tags":null,"title":"radio by vk-uiux","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":656,"cssLen":1124,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

Clouds

\n \n \n \n

Earth

\n \n \n \n

Water

\n \n

","css":"/* MAIN */\n/* =============================================== */\n.label {\n display: flex;\n align-items: center;\n border-radius: 100px;\n padding: 14px 16px;\n margin: 5px 0;\n cursor: pointer;\n transition: .3s;\n}\n\n.label:hover,\n.label:focus-within,\n.label:active {\n background: hsla(0, 0%, 80%, .14);\n}\n\n.radio-input {\n position: absolute;\n left: 0;\n top: 0;\n width: 1px;\n height: 1px;\n opacity: 0;\n z-index: -1;\n}\n\n.radio-design {\n width: 22px;\n height: 22px;\n border-radius: 100px;\n background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));\n position: relative;\n}\n\n.radio-design::before {\n content: '';\n display: inline-block;\n width: inherit;\n height: inherit;\n border-radius: inherit;\n background: hsl(0, 0%, 90%);\n transform: scale(1.1);\n transition: .3s;\n}\n\n.radio-input:checked+.radio-design::before {\n transform: scale(0);\n}\n\n.label-text {\n color: hsl(0, 0%, 60%);\n margin-left: 14px;\n letter-spacing: 3px;\n text-transform: uppercase;\n font-size: 18px;\n font-weight: 900;\n transition: .3s;\n}\n\n.radio-input:checked~.label-text {\n color: hsl(0, 0%, 40%);\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"73a03a","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":302,"cssLen":1687,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Bubble 1\n

\n \n Bubble 2\n

\n","css":".Radio input[type=\"radio\"] {\n position: absolute;\n left: -100px;\n}\n.Radio input[type=\"radio\"] + label {\n position: relative;\n display: block;\n line-height: 3rem;\n cursor: pointer;\n white-space: nowrap;\n color: #61cea5;\n}\n\n.Radio input[type=\"radio\"] + label::before,\n.Radio input[type=\"radio\"] + label::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n transition: 0.5s;\n}\n\n.Radio input[type=\"radio\"] + label {\n padding-left: 3rem;\n}\n\n.Radio input[type=\"radio\"] + label::before {\n width: 2rem;\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n background: #61cea5;\n}\n\n.Radio input[type=\"radio\"] + label::after {\n left: 0.2rem;\n width: 1.4rem;\n transform: translateY(-50%) scale(0);\n}\n\n.Radio input[type=\"radio\"]:not(:checked) + label::after {\n animation: radio 0.5s linear;\n}\n\n.Radio input[type=\"radio\"]:checked + label::after {\n transform: translateY(-50%) scale(1);\n}\n\n.Radio input[type=\"radio\"] + label::after {\n aspect-ratio: 1 / 1;\n border: 0.1rem solid #fff;\n border-radius: 50%;\n background: radial-gradient(circle at 70% 30%, #fff, rgba(0, 0, 0, 0) 25%),\n radial-gradient(\n circle at 60% 55%,\n rgba(0, 0, 0, 0) 60%,\n rgba(255, 0, 255, 0.8) 100%\n ),\n radial-gradient(\n circle at 50% 50%,\n rgba(0, 0, 0, 0) 40%,\n rgba(0, 255, 255, 0.2) 60%,\n rgba(0, 0, 0, 0) 68%\n ),\n radial-gradient(\n circle at 50% 55%,\n rgba(0, 0, 0, 0) 35%,\n rgba(255, 255, 0, 0.2) 45%,\n rgba(0, 0, 0, 0) 55%\n );\n}\n\n@keyframes radio {\n 0% {\n transform: translateY(-50%) scale(1);\n }\n 100% {\n transform: translateY(-50%) scale(1.7);\n }\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"bfb2b2","snapshot":null,"tags":null,"title":"radio by HetPatel69","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6753,"cssLen":868,"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

","css":".input {\n display: flex;\n flex-direction: column;\n width: 200px;\n background-color: #0D1117;\n justify-content: center;\n border-radius: 5px\n}\n\n.value {\n background-color: transparent;\n border: none;\n padding: 10px;\n color: white;\n display: flex;\n position: relative;\n gap: 5px;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.value:not(:active):hover,\n.value:focus {\n background-color: #21262C;\n}\n\n.value:focus,\n.value:active {\n background-color: #1A1F24;\n outline: none;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n width: 5px;\n height: 80%;\n background-color: #2F81F7;\n border-radius: 5px;\n opacity: 0;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 15px\n}\n\n.input:hover > :not(.value:hover) {\n transition: 300ms;\n filter: blur(1px);\n transform: scale(0.95,0.95);\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"f52940","snapshot":null,"tags":null,"title":"radio by JkHuger","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":738,"cssLen":938,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n Male\n \n

\n\n

\n \n \n \n Female\n \n

\n\n

\n \n \n \n Other\n \n

\n","css":".radio-container {\n margin: 0 auto;\n max-width: 300px;\n color: white;\n}\n\n.radio-wrapper {\n margin-bottom: 20px;\n}\n\n.radio-button {\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button:hover {\n transform: translateY(-2px);\n}\n\n.radio-button input[type=\"radio\"] {\n display: none;\n}\n\n.radio-checkmark {\n display: inline-block;\n position: relative;\n width: 16px;\n height: 16px;\n margin-right: 10px;\n border: 2px solid #333;\n border-radius: 50%;\n}\n\n.radio-checkmark:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #333;\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked ~ .radio-checkmark:before {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.radio-label {\n font-size: 16px;\n font-weight: 600;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"be6ba3","snapshot":null,"tags":null,"title":"radio by ayman-ashine","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7346,"cssLen":3617,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Please select your gender\n

\n \n

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

\n \n

\n \n \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":".absolute{position:absolute}.relative{position:relative}.-z-10{z-index:-10}.z-10{z-index:10}.flex{display:flex}.h-\\[50px\\]{height:50px}.h-full{height:100%}.w-\\[50px\\]{width:50px}.w-full{width:100%}.scale-0{--tw-scale-x:0;--tw-scale-y:0;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))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243 / var(--tw-bg-opacity))}.bg-pink-200{--tw-bg-opacity:1;background-color:rgb(251 207 232 / var(--tw-bg-opacity))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255 / var(--tw-bg-opacity))}.bg-purple-200{--tw-bg-opacity:1;background-color:rgb(233 213 255 / var(--tw-bg-opacity))}.fill-pink-400{fill:#f472b6}.fill-purple-400{fill:#c084fc}.stroke-blue-400{stroke:#60a5fa}.stroke-neutral-400{stroke:#a3a3a3}.p-2{padding:0.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}.text-base{font-size:1rem;line-height:1.5rem}.font-black{font-weight:900}.uppercase{text-transform:uppercase}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82 / var(--tw-text-opacity))}.opacity-0{opacity:0}.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)}.shadow-\\[\\#00000050\\]{--tw-shadow-color:#00000050;--tw-shadow:var(--tw-shadow-colored)}.ring-blue-400{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250 / var(--tw-ring-opacity))}.ring-neutral-400{--tw-ring-opacity:1;--tw-ring-color:rgb(163 163 163 / var(--tw-ring-opacity))}.ring-pink-400{--tw-ring-opacity:1;--tw-ring-color:rgb(244 114 182 / var(--tw-ring-opacity))}.ring-purple-400{--tw-ring-opacity:1;--tw-ring-color:rgb(192 132 252 / var(--tw-ring-opacity))}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.peer:checked ~ .peer-checked\\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;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\\:scale-\\[500\\%\\]{--tw-scale-x:500%;--tw-scale-y:500%;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\\:ring-2{--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)}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"84fe46","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:04.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2583,"cssLen":1472,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Walk\n

\n\n

\n \n

\n Bike\n

\n\n

\n \n

\n Drive\n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.radio-tile-group {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.radio-tile-group .input-container {\n position: relative;\n height: 80px;\n width: 80px;\n margin: 0.5rem;\n}\n\n.radio-tile-group .input-container .radio-button {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n}\n\n.radio-tile-group .input-container .radio-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border: 2px solid #079ad9;\n border-radius: 5px;\n padding: 1rem;\n transition: transform 300ms ease;\n}\n\n.radio-tile-group .input-container .icon svg {\n fill: #079ad9;\n width: 2rem;\n height: 2rem;\n}\n\n.radio-tile-group .input-container .radio-tile-label {\n text-align: center;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile {\n background-color: #079ad9;\n border: 2px solid #079ad9;\n color: white;\n transform: scale(1.1, 1.1);\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {\n fill: white;\n background-color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {\n color: white;\n background-color: #079ad9;\n}\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,"htmlType":"html","pureCSS":1,"htmlLen":93,"cssLen":708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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":"c5436a","snapshot":null,"tags":null,"title":"input by ayman-ashine","updated":"2024-01-22T17:16:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":336,"cssLen":2450,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".rounded-full {\n border-radius: 9999px;\n}\n.bg-zinc-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(228 228 231 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n \"Liberation Mono\", \"Courier New\", monospace;\n}\n.text-zinc-600 {\n --tw-text-opacity: 1;\n color: rgb(82 82 91 / var(--tw-text-opacity));\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.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.ring-zinc-400 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity));\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.placeholder\\:text-zinc-600::placeholder {\n --tw-text-opacity: 1;\n color: rgb(82 82 91 / var(--tw-text-opacity));\n}\n.placeholder\\:opacity-50::placeholder {\n opacity: 0.5;\n}\n.focus\\:shadow-lg:focus {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),\n 0 4px 6px -4px 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.focus\\:shadow-rose-400:focus {\n --tw-shadow-color: #fb7185;\n --tw-shadow: var(--tw-shadow-colored);\n}\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0\n var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0\n calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),\n var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-rose-400:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity));\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,"htmlType":"html","pureCSS":1,"htmlLen":134,"cssLen":1192,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","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"}]}},"actionData":null,"errors":null}