{"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":37,"projects":[{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3201b0","snapshot":null,"tags":null,"title":"radio by FH638","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":7046,"jsLen":0,"cssLen":1094,"pureCSS":1,"html":"

\n \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: 10px;\n transition: 1s;\n padding: 10px;\n overflow: hidden;\n}\n\n.value {\n font-size: 15px;\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: 10px;\n transition: 1s;\n box-sizing: border-box;\n}\n\n.value:not(:active):hover,\n.value:focus {\n display: flex;\n box-sizing: border-box;\n border: 2px solid #1a1f24;\n color: #637185;\n}\n\n.value:focus,\n.value:active {\n background-color: #1a1f24;\n outline: none;\n margin-left: 17px;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -15px;\n width: 5px;\n height: 80%;\n background-color: #2f81f7;\n border-radius: 5px;\n opacity: 0;\n transition: 1s;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 20px;\n}\n\n.input:hover > :not(.value:hover) {\n transition: 300ms;\n filter: blur(1.5px);\n transform: scale(0.95, 0.95);\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":2059,"jsLen":0,"cssLen":1778,"pureCSS":1,"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":"3a7f63","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":264,"jsLen":0,"cssLen":2129,"pureCSS":1,"html":"

\n Click\n Me\n to\n And so on ..\n

\n","css":".container {\n --s: 1em; /* control the size */\n --g: 10px; /* the gap */\n --c: #009688; /* the active color */\n\n display: grid;\n grid-auto-rows: 1fr;\n gap: var(--g);\n position: relative;\n}\n.container:before {\n content: \"\";\n position: absolute;\n height: calc(var(--s) / 2);\n left: calc(var(--s) / 4 + var(--_x, 0px));\n top: calc(var(--s) / 4);\n background: var(--c);\n border-radius: 50%;\n aspect-ratio: 1;\n transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;\n}\n.container label {\n display: inline-flex;\n line-height: var(--s);\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n.container input {\n height: var(--s);\n aspect-ratio: 1;\n border: calc(var(--s) / 8) solid var(--_c, #939393);\n border-radius: 50%;\n outline-offset: calc(var(--s) / 10);\n padding: calc(var(--s) / 8);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n font-size: inherit;\n margin: 0;\n transition: 0.3s;\n}\n.container input:checked {\n --_c: var(--c);\n}\n.container:not(:has(input:checked)):before {\n --_i: -1;\n opacity: 0;\n}\n.container:has(input:checked):before {\n opacity: 1;\n transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));\n}\n.container:has(label:nth-child(1) input:checked):before {\n --_i: 0;\n --_x: 0.02px;\n}\n.container:has(label:nth-child(2) input:checked):before {\n --_i: 1;\n --_x: 0.04px;\n}\n.container:has(label:nth-child(3) input:checked):before {\n --_i: 2;\n --_x: 0.06px;\n}\n.container:has(label:nth-child(4) input:checked):before {\n --_i: 3;\n --_x: 0.08px;\n}\n.container:has(label:nth-child(5) input:checked):before {\n --_i: 4;\n --_x: 0.1px;\n}\n/* and so on ..*/\n\n.container input:disabled {\n background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;\n opacity: 0.5;\n cursor: not-allowed;\n}\n@media print {\n input[type=\"radio\"] {\n -webkit-appearance: auto;\n -moz-appearance: auto;\n appearance: auto;\n background: none;\n }\n}\n@supports not selector(:has(*)) {\n .container:before {\n display: none;\n }\n .container input:checked {\n --_c: var(--c);\n background: var(--c) content-box;\n }\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3cc964","snapshot":null,"tags":null,"title":"radio by ozgeozkaraa01","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":666,"jsLen":0,"cssLen":1092,"pureCSS":1,"html":"

\n \n \n

\n Option 1\n \n \n \n

\n Option 2\n \n \n \n

\n Option 3\n \n

\n\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f2f2f2;\n}\n\n.custom-radio {\n display: flex;\n flex-direction: column;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.custom-radio input[type=\"radio\"] {\n display: none;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n padding: 10px 20px;\n cursor: pointer;\n transition: background-color 0.3s ease-in-out;\n}\n\n.radio-circle {\n width: 20px;\n height: 20px;\n border: 2px solid #ffcc00;\n border-radius: 50%;\n margin-right: 10px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n\n.radio-text {\n font-size: 1rem;\n color: #333;\n transition: color 0.3s ease-in-out;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label {\n background-color: #ffcc00;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label .radio-circle {\n border-color: #fff;\n background-color: #ffcc00;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label .radio-text {\n color: #64748b;\n}\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":302,"jsLen":0,"cssLen":1687,"pureCSS":1,"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":"85b7a9","snapshot":null,"tags":null,"title":"radio by aadium","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":690,"jsLen":0,"cssLen":2267,"pureCSS":1,"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":"8db17c","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":519,"jsLen":0,"cssLen":1403,"pureCSS":1,"html":"

\n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n 4\n \n \n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n --container_width: 300px;\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 9999px;\n background-color: #fff;\n color: #000000;\n width: var(--container_width);\n overflow: hidden;\n border: 1px solid rgba(53, 52, 52, 0.226);\n}\n\n.radio-input label {\n width: 100%;\n padding: 10px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n font-weight: 600;\n letter-spacing: -1px;\n font-size: 14px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: 100%;\n width: calc(var(--container_width) / 4);\n z-index: 0;\n left: 0;\n top: 0;\n transition: .15s ease;\n}\n\n.radio-input label:has(input:checked) {\n color: #fff;\n}\n\n.radio-input label:has(input:checked) ~ .selection {\n background-color: rgb(11 117 223);\n display: inline-block;\n}\n\n.radio-input label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 0/4));\n}\n\n.radio-input label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 1/4));\n}\n\n.radio-input label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 2/4));\n}\n\n.radio-input label:nth-child(4):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 3/4));\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"9321b6","snapshot":null,"tags":null,"title":"radio by Praashoo7","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":558,"jsLen":0,"cssLen":4096,"pureCSS":1,"html":"

\n\n \n

\n\n\n \n

\n\n

","css":"/*Design Inspired by @ykadosh on Codepen*/\n\n.back {\n position: absolute;\n width: 16.6em;\n height: 6.5em;\n margin-top: -0.8em;\n margin-left: -0.77em;\n border-radius: 70px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n z-index: -1;\n}\n\n.main {\n display: flex;\n}\n\n.switch {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch input {\n display: none;\n}\n\n.switch input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #9b0621;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.75em;\n cursor: pointer;\n}\n\n.switch .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);\n}\n\n.switch .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}\n\n@keyframes flicker {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0.8;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes light-off {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0;\n }\n}\n\n.switch1 {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch1 input {\n display: none;\n}\n\n.switch1 input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch1 input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch1 input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch1 .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #949207;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.785em;\n cursor: pointer;\n}\n\n.switch1 .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);\n}\n\n.switch1 .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}\n\n.switch2 {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch2 input {\n display: none;\n}\n\n.switch2 input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch2 input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch2 input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch2 .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #2f9407;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.79em;\n cursor: pointer;\n}\n\n.switch2 .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);\n}\n\n.switch2 .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"98419d","snapshot":null,"tags":null,"title":"radio by coding-masala","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":575,"jsLen":0,"cssLen":1327,"pureCSS":1,"html":"

\n \n \n

\n Option 1\n \n \n \n

\n Option 2\n \n \n \n

\n Option 3\n \n

\n","css":".radio-buttons {\n display: flex;\n flex-direction: column;\n color: white;\n}\n\n.radio-button {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n cursor: pointer;\n}\n\n.radio-button input[type=\"radio\"] {\n display: none;\n}\n\n.radio-circle {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #aaa;\n position: relative;\n margin-right: 10px;\n}\n\n.radio-circle::before {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #ddd;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio-circle::before {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.radio-button:nth-of-type(1) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ff6600;\n}\n\n.radio-button:nth-of-type(2) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ffffff;\n}\n\n.radio-button:nth-of-type(3) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #26be00;\n}\n\n.radio-label {\n font-size: 16px;\n font-weight: bold;\n}\n\n.radio-button:hover .radio-circle {\n border-color: #555;\n}\n\n.radio-button:hover input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #555;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"9dd0e2","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":300,"jsLen":0,"cssLen":976,"pureCSS":1,"html":"

\n\t\n

","css":".container form {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.container label {\n display: flex;\n cursor: pointer;\n font-weight: 500;\n position: relative;\n overflow: hidden;\n margin-bottom: 0.375em;\n}\n\n.container label input {\n position: absolute;\n left: -9999px;\n}\n\n.container label input:checked + span {\n background-color: #414181;\n color: white;\n}\n\n.container label input:checked + span:before {\n box-shadow: inset 0 0 0 0.4375em #00005c;\n}\n\n.container label span {\n display: flex;\n align-items: center;\n padding: 0.375em 0.75em 0.375em 0.375em;\n border-radius: 99em;\n transition: 0.25s ease;\n color: #414181;\n}\n\n.container label span:hover {\n background-color: #d6d6e5;\n}\n\n.container label span:before {\n display: flex;\n flex-shrink: 0;\n content: \"\";\n background-color: #fff;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n margin-right: 0.375em;\n transition: 0.25s ease;\n box-shadow: inset 0 0 0 0.125em #00005c;\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,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":7346,"jsLen":0,"cssLen":3617,"pureCSS":1,"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":"bfb2b2","snapshot":null,"tags":null,"title":"radio by HetPatel69","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":6753,"jsLen":0,"cssLen":868,"pureCSS":1,"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}"}]}},"actionData":null,"errors":null}