{"loaderData":{"0":null,"0-3":{"total":7263,"projects":[{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"f92b4f","snapshot":null,"tags":null,"title":"radio by Shoh2008","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":283,"cssLen":978,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\t\n\t\n

","css":".radio {\n background: #454857;\n padding: 4px;\n border-radius: 3px;\n box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),\n\t\t0 0 0 3px rgba(185, 185, 185, 0.3);\n position: relative;\n}\n\n.radio input {\n width: auto;\n height: 100%;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n cursor: pointer;\n border-radius: 2px;\n padding: 4px 8px;\n background: #454857;\n color: #bdbdbdbd;\n font-size: 14px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n\t\t\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n transition: all 100ms linear;\n}\n\n.radio input:checked {\n background-image: linear-gradient(180deg, #95d891, #74bbad);\n color: #fff;\n box-shadow: 0 1px 1px #0000002e;\n text-shadow: 0 1px 0px #79485f7a;\n}\n\n.radio input:before {\n content: attr(label);\n display: inline-block;\n text-align: center;\n width: 100%;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"124ffb","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":1548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n What does CSS stand for?\n 3/10\n

\n \n Computer Style Sheets\n \n Cascading Style Sheets\n \n Creative Style Sheets\n Congratulations!\n Bad answer\n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n display: flex;\n flex-direction: column;\n padding: 12px;\n background: #fff;\n color: #000;\n border-radius: 10px;\n box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);\n width: 320px;\n}\n\n.info {\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.question {\n color: rgb(49, 49, 49);\n font-size: 1rem;\n line-height: 1rem;\n font-weight: 800;\n}\n\n.steps {\n background-color: rgb(0, 0, 0);\n padding: 4px;\n color: #fff;\n border-radius: 4px;\n font-size: 12px;\n line-height: 12px;\n font-weight: 600;\n}\n\n.radio-input label {\n display: flex;\n background-color: #fff;\n padding: 14px;\n margin: 8px 0 0 0;\n font-size: 13px;\n font-weight: 600;\n border-radius: 10px;\n cursor: pointer;\n border: 1px solid rgba(187, 187, 187, 0.164);\n color: #000;\n transition: .3s ease;\n}\n\n.radio-input label:hover {\n background-color: rgba(24, 24, 24, 0.13);\n border: 1px solid #bbb;\n}\n\n.result {\n margin-top: 10px;\n font-weight: 600;\n font-size: 12px;\n display: none;\n transition: display .4s ease;\n}\n\n.result.success {\n color: green;\n}\n\n.result.error {\n color: red;\n}\n\n.radio-input input:checked + label {\n border-color: red;\n color: red;\n}\n\n.radio-input input[value=\"value-2\"]:checked + label {\n border-color: rgb(22, 245, 22);\n color: rgb(16, 184, 16);\n}\n\n.radio-input:has(input[value=\"value-2\"]:checked) .result.success {\n display: flex;\n}\n\n.radio-input:has(input:not([value=\"value-2\"]):checked ) .result.error {\n display: flex;\n}"},{"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}"}]}},"actionData":null,"errors":null}