{"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":229,"projects":[{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"19e1c9","snapshot":null,"tags":null,"title":"switch by uxRakhal","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":91,"jsLen":0,"cssLen":1171,"pureCSS":1,"html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: white;\n border-radius: 50px;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n right: 0.3em;\n bottom: 0.3em;\n transform: translateX(150%);\n background-color: #59d102;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.slider:after {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #ff0000;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #59d102;\n}\n\n.switch input:checked + .slider:before {\n transform: translateY(0);\n}\n\n.switch input:checked + .slider::after {\n transform: translateX(-150%);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"24cd79","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":930,"jsLen":0,"cssLen":13672,"pureCSS":1,"html":"\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n","css":".switch {\n display: inline-block;\n margin: 10em 2em;\n position: relative;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n}\n\n.switch label {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n}\n\n.switch input {\n display: none;\n}\n\n.switch span {\n display: block;\n -webkit-transition: top 0.2s;\n -moz-transition: top 0.2s;\n -ms-transition: top 0.2s;\n -o-transition: top 0.2s;\n transition: top 0.2s;\n}\n\n.switch-border1 {\n border: 0.1em solid #000;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n}\n\n.switch-border2 {\n width: 6.6em;\n height: 12.6em;\n position: relative;\n border: 0.1em solid #323232;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-border2:before,\n.switch-border2:after {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n opacity: .3;\n border-radius: 3.4em;\n}\n\n.switch-border2:before {\n background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));\n background: -webkit-linear-gradient(#000, rgba(0,0,0,0));\n background: -moz-linear-gradient(#000, rgba(0,0,0,0));\n background: -ms-linear-gradient(#000, rgba(0,0,0,0));\n background: -o-linear-gradient(#000, rgba(0,0,0,0));\n background: linear-gradient(#000, rgba(0,0,0,0));\n}\n\n.switch-border2:after {\n background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));\n background: -webkit-linear-gradient(rgba(0,0,0,0), #000);\n background: -moz-linear-gradient(rgba(0,0,0,0), #000);\n background: -ms-linear-gradient(rgba(0,0,0,0), #000);\n background: -o-linear-gradient(rgba(0,0,0,0), #000);\n background: linear-gradient(rgba(0,0,0,0), #000);\n}\n\n.switch-top {\n width: 100%;\n height: 84%;\n position: absolute;\n top: 8%;\n left: 0;\n z-index: 1;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-shadow {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border-radius: 3.4em;\n -webkit-box-shadow: 0 0 2em black inset;\n -moz-box-shadow: 0 0 2em black inset;\n box-shadow: 0 0 2em black inset;\n}\n\n.switch-handle-left,\n.switch-handle-right {\n content: '';\n display: block;\n width: 3.6em;\n height: 0;\n position: absolute;\n top: 6.6em;\n z-index: 2;\n border-bottom: 4.5em solid #111;\n border-left: 0.7em solid transparent;\n border-right: 0.7em solid transparent;\n border-radius: 0;\n}\n\n.switch-handle-left {\n left: 0.8em;\n}\n\n.switch-handle-right {\n right: 0.8em;\n}\n\n.switch-handle {\n width: 3.6em;\n height: 4.5em;\n position: absolute;\n top: 6.6em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-radius: 0;\n}\n\n.switch-handle-top {\n width: 5em;\n height: 5em;\n position: absolute;\n top: 8.5em;\n left: 0.8em;\n z-index: 4;\n background-color: #555;\n background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));\n background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);\n background-image: -moz-linear-gradient(left, #5F5F5F, #878787);\n background-image: -ms-linear-gradient(left, #5F5F5F, #878787);\n background-image: -o-linear-gradient(left, #5F5F5F, #878787);\n background-image: linear-gradient(to right, #5F5F5F, #878787);\n border-top: 0.2em solid #AEB2B3;\n border-radius: 2.5em;\n}\n\n.switch-handle-bottom {\n width: 3.6em;\n height: 3.6em;\n position: absolute;\n top: 4.7em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-top: 0.2em solid #141414;\n border-radius: 1.8em;\n}\n\n.switch-handle-base {\n width: 4.2em;\n height: 4.2em;\n position: absolute;\n top: 3.8em;\n left: 1.2em;\n z-index: 2;\n border-top: 0.2em solid rgba(255,255,255,0.35);\n border-radius: 2.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n}\n\n.switch-led {\n position: absolute;\n left: 2em;\n border-radius: 1.4em;\n}\n\n.switch-led-border {\n border: 0.2em solid black;\n border-radius: 1.3em;\n}\n\n.switch-led-light {\n border-radius: 1.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n}\n\n.switch-led-glow {\n width: 2em;\n height: 2em;\n position: relative;\n border-radius: 1em;\n}\n\n.switch-led-glow:before {\n content: '';\n display: block;\n width: 0.6em;\n height: 0.6em;\n position: absolute;\n top: 0.3em;\n left: 0.7em;\n background: rgba(255,255,255,0.2);\n border-radius: 0.3em;\n -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n box-shadow: 0 0 1em rgba(255,255,255,0.75);\n}\n\n.switch-led-glow:after {\n content: '';\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.2;\n filter: alpha(opacity=20);\n border: 1em solid #fff;\n border-color: transparent #fff transparent #fff;\n border-radius: 1em;\n -webkit-transform: rotate(45deg);\n -moz-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n -o-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.switch-led:after {\n display: block;\n width: 100%;\n position: absolute;\n left: 0;\n color: #666;\n font-family: arial, verdana, sans-serif;\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0.1em rgba(0,0,0,0.7);\n}\n\n.switch-led-green:after {\n content: 'ON';\n top: -1.8em;\n}\n\n.switch-led-red:after {\n content: 'OFF';\n bottom: -1.8em;\n}\n\n.switch-led-green {\n top: -5em;\n border-top: 0.1em solid rgba(0,161,75,0.5);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n}\n\n.switch-led-green .switch-led-light {\n background: rgb(0,161,75);\n border: 0.1em solid rgb(0,104,56);\n}\n\n.switch-led-red {\n bottom: -5em;\n border-top: 0.1em solid rgba(237,28,36,0.2);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n -webkit-box-shadow: 0 0 3em rgb(237,28,36);\n -moz-box-shadow: 0 0 3em rgb(237,28,36);\n box-shadow: 0 0 3em rgb(237,28,36);\n}\n\n.switch-led-red .switch-led-light {\n background: rgb(237,28,36);\n border: 0.1em solid rgb(161,30,45);\n}\n\n.switch-led-red .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.3);\n filter: alpha(opacity=30);\n}\n\n/* Switch on */\n\n.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {\n top: 1.5em;\n border-bottom: 0;\n border-top: 4.5em solid #111;\n}\n\n.switch input:checked~.switch-handle {\n top: 1.5em;\n}\n\n.switch input:checked~.switch-handle-top {\n top: -1em;\n border-top: 0;\n border-bottom: 0.2em solid #AEB2B3;\n}\n\n.switch input:checked~.switch-handle-bottom {\n top: 4.2em;\n border-top: 0;\n border-bottom: 0.2em solid #141414;\n}\n\n.switch input:checked~.switch-handle-base {\n top: 4.5em;\n border-top: 0;\n border-bottom: 0.2em solid rgba(255,255,255,0.35);\n}\n\n.switch input:checked~.switch-led-green {\n -webkit-box-shadow: 0 0 3em rgb(0,161,75);\n -moz-box-shadow: 0 0 3em rgb(0,161,75);\n box-shadow: 0 0 3em rgb(0,161,75);\n}\n\n.switch input:checked~.switch-led-green .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.4);\n filter: alpha(opacity=40);\n}\n\n.switch input:checked~.switch-led-red {\n -webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n}\n\n.switch input:checked~.switch-led-red .switch-led-glow {\n background: rgba(255, 255, 255, 0);\n filter: alpha(opacity=0);\n}\n\n#switchwhite {\n visibility: hidden;\n clip: rect(0 0 0 0);\n position: absolute;\n left: 9999px;\n}\n\n.switchwhite {\n display: block;\n width: 130px;\n height: 60px;\n margin: 70px auto;\n position: relative;\n background: #ced8da;\n /* Old browsers */\n background: -moz-linear-gradient(left, #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* IE10+ */\n background: linear-gradient(to right, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );\n /* IE6-9 */\n transition: all 0.2s ease-out;\n cursor: pointer;\n border-radius: 0.35em;\n box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),\n inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 0 1px rgba(0,0,0,0.3),\n 0 8px 10px rgba(0,0,0,0.15);\n}\n\n.switchwhite:before {\n display: block;\n position: absolute;\n left: -35px;\n right: -35px;\n top: -25px;\n bottom: -25px;\n z-index: -2;\n content: \"\";\n border-radius: 0.4em;\n background: #d5dde0;\n background: linear-gradient(#d7dfe2, #bcc7cd);\n box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 1px 1px rgba(0,0,0,0.3),\n 0 0 8px 2px rgba(0,0,0,0.2),\n 0 2px 4px 2px rgba(0,0,0,0.1);\n pointer-events: none;\n transition: all 0.2s ease-out;\n}\n\n.switchwhite:after {\n content: \"\";\n position: absolute;\n right: -25px;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #788b91;\n margin-top: -8px;\n z-index: -1;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -47px 32px 15px 13px rgba(0,0,0,0.25);\n}\n\n#switchwhite:checked ~ .switchwhite {\n background: #b7bfc2;\n /* Old browsers */\n background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* IE10+ */\n background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );\n /* IE6-9 */\n}\n\n#switchwhite:checked ~ .switchwhite:after {\n background: #b1ffff;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -110px 32px 15px 13px rgba(0,0,0,0.25);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"2dc05e","snapshot":null,"tags":null,"title":"switch by omriluz","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":535,"jsLen":0,"cssLen":2441,"pureCSS":1,"html":"\n \n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.left-\\[3\\%\\]{left:3%}.top-1\\/2{top:50%}.block{display:block}.hidden{display:none}.aspect-\\[2\\/0\\.75\\]{aspect-ratio:2/0.75}.aspect-square{aspect-ratio:1 / 1}.h-\\[90\\%\\]{height:90%}.w-20{width:5rem}.-translate-y-1\\/2{--tw-translate-y:-50%;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))}.rotate-180{--tw-rotate:180deg;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))}.rounded-full{border-radius:9999px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-purple-100{--tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);--tw-gradient-to:rgb(243 232 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-violet-600{--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #7c3aed var(--tw-gradient-via-position), var(--tw-gradient-to)}.bg-\\[length\\:100\\%_100\\%\\]{background-size:100% 100%}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px 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-purple-300{--tw-shadow-color:#d8b4fe;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\\:bg-\\[length\\:100\\%_500\\%\\]:hover{background-size:100% 500%}.focus\\:bg-\\[length\\:100\\%_500\\%\\]:focus{background-size:100% 500%}.peer\\/input:checked ~ .peer-checked\\/input\\:left-\\[63\\%\\]{left:63%}.peer\\/input:checked ~ .peer-checked\\/input\\:-rotate-6{--tw-rotate:-6deg;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))}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"3083e7","snapshot":null,"tags":null,"title":"switch by alexruix","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":92,"jsLen":0,"cssLen":916,"pureCSS":1,"html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 30px;\n box-shadow: 0 0 0 2px #f32f2150;\n border: 4px solid transparent;\n overflow: hidden;\n transition: .4s;\n background: transparent;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background-color: #f32f21;\n transform: translateX(-50%);\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #f7b48e;\n}\n\ninput:focus:checked + .slider {\n box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"38d063","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":42,"jsLen":0,"cssLen":2836,"pureCSS":1,"html":"","css":".plus-minus {\n --primary: #1E2235;\n --secondary: #FAFBFF;\n --duration: .5s;\n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n outline: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transform-style: preserve-3d;\n perspective: 240px;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n border: 4px solid var(--primary);\n background-size: 300% 300%;\n transition: transform 0.3s;\n transform: scale(var(--scale, 1)) translateZ(0);\n -webkit-animation: var(--name, unchecked) var(--duration) ease forwards;\n animation: var(--name, unchecked) var(--duration) ease forwards;\n}\n\n.plus-minus:before, .plus-minus:after {\n content: \"\";\n position: absolute;\n width: 16px;\n height: var(--height, 16px);\n left: 6px;\n top: var(--top, 6px);\n background: var(--background, var(--primary));\n -webkit-animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;\n animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;\n}\n\n.plus-minus:before {\n -webkit-clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);\n clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);\n}\n\n.plus-minus:after {\n --height: 4px;\n --top: 12px;\n --background: var(--secondary);\n --name-icon-b: var(--name-icon-a, checked-icon);\n}\n\n.plus-minus:active {\n --scale: .95;\n}\n\n.plus-minus:checked {\n --name: checked;\n --name-icon-b: checked-icon;\n --name-icon-a: unchecked-icon;\n}\n\n@keyframes checked-icon {\n from {\n transform: translateZ(12px);\n }\n\n to {\n transform: translateX(16px) rotateY(90deg) translateZ(12px);\n }\n}\n\n@keyframes unchecked-icon {\n from {\n transform: translateX(-16px) rotateY(-90deg) translateZ(12px);\n }\n\n to {\n transform: translateZ(12px);\n }\n}\n\n@keyframes checked {\n from {\n background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);\n background-position: 100% 50%;\n }\n\n to {\n background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);\n background-position: 50% 50%;\n }\n}\n\n@keyframes unchecked {\n from {\n background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);\n background-position: 100% 50%;\n }\n\n to {\n background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);\n background-position: 50% 50%;\n }\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"44d33a","snapshot":null,"tags":null,"title":"switch by SujitAdroja","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":101,"jsLen":0,"cssLen":794,"pureCSS":1,"html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch .inpt {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #9dc4e6;\n transition: .4s;\n border-radius: 30px;\n box-shadow: inset 3px 3px 5px rgba(0,0,0);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 50px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n transition: .4s;\n}\n\n.inpt:checked + .slider {\n background-color: #2196F3;\n}\n\n.inpt:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"539b70","snapshot":null,"tags":null,"title":"switch by xantha01","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":131,"jsLen":0,"cssLen":1569,"pureCSS":1,"html":" \n \n

\n ","css":"#checkbox {\n display: none;\n}\n\n.switch {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(255, 5, 5);\n border-radius: 50%;\n z-index: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid rgb(255, 126, 126);\n box-shadow: 0px 0px 3px rgb(248, 248, 248) inset;\n}\n\n.powersign {\n position: relative;\n width: 30%;\n height: 30%;\n border: 4px solid rgb(248, 248, 248);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.powersign::before {\n content: \"\";\n width: 8px;\n height: 60%;\n background-color: rgb(248, 248, 248);\n position: absolute;\n top: -60%;\n z-index: 2;\n}\n\n.powersign::after {\n content: \"\";\n width: 3px;\n height: 60%;\n background-color: rgb(255, 5, 5);\n position: absolute;\n top: -60%;\n z-index: 3;\n}\n\n#checkbox:checked + .switch .powersign {\n border: 4px solid rgb(255, 255, 255);\n box-shadow: 0px 0px 10px rgb(151, 243, 255),\n 0px 0px 5px rgb(151, 243, 255) inset;\n}\n\n#checkbox:checked + .switch .powersign::after {\n background-color: rgb(150, 255, 194);\n}\n\n#checkbox:checked + .switch {\n box-shadow: 0px 0px 1px rgb(150, 255, 194) inset,\n 0px 0px 2px rgb(150, 255, 194) inset,\n 0px 0px 10px rgb(150, 255, 194) inset,\n 0px 0px 40px rgb(150, 255, 194),\n 0px 0px 100px rgb(150, 255, 194),\n 0px 0px 5px rgb(150, 255, 194);\n border: 2px solid rgb(255, 255, 255);\n background-color: rgb(136, 219, 150);\n}\n\n#checkbox:checked + .switch .powersign::before {\n background-color: rgb(255, 255, 255);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"682dab","snapshot":null,"tags":null,"title":"switch by nanda248","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":161,"jsLen":0,"cssLen":1204,"pureCSS":1,"html":"\n \n \n

\n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 4em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #585F60;\n transition: .5s;\n border-radius: 1em;\n z-index: 1;\n}\n\n.slider .circle {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 50%;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #F1EEF5;\n transition: .5s;\n z-index: 5;\n}\n\n.divider {\n position: absolute;\n left: 0.65em;\n width: 0.8em;\n height: 1.4em;\n background-color: #eed202;\n z-index: 10;\n border-radius: 0 2em 2em 0;\n transition: .4s;\n}\n\n.switch input:checked + .slider {\n background-color: #eed202;\n z-index: 1;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 4px #191A28;\n}\n\n.switch input:checked + .slider .circle {\n transform: translateX(2em);\n}\n\n.switch input:checked + .slider .circle .divider {\n left: 0;\n width: 0.8em;\n border-radius: 2em 0 0 2em;\n background-color: #585F60;\n z-index: 10;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"80f132","snapshot":null,"tags":null,"title":"switch by anonithrax","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":115,"jsLen":0,"cssLen":679,"pureCSS":1,"html":"

\n \n \n

\n","css":"/* The switch - the box around the slider */\n.switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n display: none;\n}\n\n/* The slider */\n.switch label {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .3s;\n}\n\n.switch label::before {\n position: absolute;\n content: \"\";\n height: 30px;\n width: 30px;\n left: 2px;\n bottom: 2px;\n background-color: white;\n transition: .3s;\n}\n\n.switch input:checked + label {\n background-color: #4c71f2;\n}\n\n.switch input:checked + label::before {\n transform: translateX(26px);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"ad20cc","snapshot":null,"tags":null,"title":"switch by LeonKohli","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":6128,"jsLen":0,"cssLen":619,"pureCSS":1,"html":"

\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":".toggle {\n background-color: #fff;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n cursor: pointer;\n box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);\n line-height: 1;\n}\n\n.input {\n display: none;\n}\n\n.icon {\n grid-column: 1 / 1;\n grid-row: 1 / 1;\n transition: transform 500ms;\n}\n\n.icon--moon {\n transition-delay: 200ms;\n}\n\n.icon--sun {\n transform: scale(0);\n}\n\n#switch:checked + .icon--moon {\n transform: rotate(360deg) scale(0);\n}\n\n#switch:checked ~ .icon--sun {\n transition-delay: 200ms;\n transform: scale(1) rotate(360deg);\n}\n\n.w-8 {\n width: 2rem /* 32px */;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"afb418","snapshot":null,"tags":null,"title":"switch by simontheonlyone","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":121,"jsLen":0,"cssLen":1224,"pureCSS":1,"html":"\n \n \n

\n\n","css":".switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 6em;\n height: 6em;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n inset: 0;\n background-color: #333;\n border-radius: 30px;\n}\n\n.slider:before {\n height: 0.8em;\n width: 1.1em;\n inset: 44px 28px;\n background: #eee;\n border-radius: 4px;\n}\n\n.battery {\n height: 1.4em;\n width: 2.9em;\n inset: 39px 23px;\n border: 2px solid #eee;\n border-radius: 8px;\n}\n\n.battery:before {\n height: 0.4em;\n width: 0.1em;\n inset: 0.4em 50px;\n border: none;\n border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;\n background: #eee;\n}\n\n.switch input:checked + .slider {\n background-color: #eee;\n box-shadow: 0 0 1px #eee;\n}\n\n.switch input:checked ~ .battery {\n border: 2px solid #111;\n}\n\n.switch input:checked ~ .battery:before {\n background: #111;\n}\n\n.switch input:checked + .slider:before {\n background: rgb(255, 176, 85);\n animation: lowbattery 1.6s linear;\n}\n\n@keyframes lowbattery {\n 0% {\n width: 1.1em;\n }\n 40% {\n width: 2.3em;\n }\n 70% {\n width: 2.3em;\n }\n 100% {\n width: 1.1em;\n }\n}\n\n.slider,\n.battery,\n.slider:before,\n.battery:before {\n position: absolute;\n content: \"\";\n transition: 0.5s;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"c53f16","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":206,"jsLen":0,"cssLen":924,"pureCSS":1,"html":"\n\n

\n\n","css":"#checkbox2 {\n display: none;\n}\n\n.toggle2 {\n position: relative;\n width: 60px;\n height: 60px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n transition-duration: .5s;\n}\n\n.bars {\n width: 100%;\n height: 6px;\n background-color: rgb(92, 176, 255);\n border-radius: 6px;\n}\n\n#bar5 {\n transition-duration: .8s;\n}\n\n#bar4,#bar6 {\n width: 80%;\n}\n\n#checkbox2:checked + .toggle2 .bars {\n position: absolute;\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar5 {\n transform: scaleX(0);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar4 {\n width: 100%;\n transform: rotate(45deg);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar6 {\n width: 100%;\n transform: rotate(-45deg);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 {\n transition-duration: .5s;\n transform: rotate(180deg);\n}"}]}},"actionData":null,"errors":null}