{"html":"\n \n \n \n \n \n \n \n \n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.left-\\[13px\\] {\n left: 13px;\n}\n.right-\\[13px\\] {\n right: 13px;\n}\n.inline-flex {\n display: inline-flex;\n}\n.hidden {\n display: none;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-\\[50px\\] {\n height: 50px;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-\\[110px\\] {\n width: 110px;\n}\n.items-center {\n align-items: center;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.from-orange-500 {\n --tw-gradient-from: #f97316 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-yellow-400 {\n --tw-gradient-to: #facc15 var(--tw-gradient-to-position);\n}\n.fill-black {\n fill: #000;\n}\n.fill-white {\n fill: #fff;\n}\n.opacity-60 {\n opacity: 0.6;\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 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.duration-300 {\n transition-duration: 300ms;\n}\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n.after\\:left-\\[5px\\]::after {\n content: var(--tw-content);\n left: 5px;\n}\n.after\\:top-\\[5px\\]::after {\n content: var(--tw-content);\n top: 5px;\n}\n.after\\:h-\\[40px\\]::after {\n content: var(--tw-content);\n height: 40px;\n}\n.after\\:w-\\[40px\\]::after {\n content: var(--tw-content);\n width: 40px;\n}\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n.after\\:bg-gradient-to-r::after {\n content: var(--tw-content);\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.after\\:shadow-md::after {\n content: var(--tw-content);\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.after\\:duration-300::after {\n content: var(--tw-content);\n transition-duration: 300ms;\n}\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: \"\";\n content: var(--tw-content);\n}\n.active\\:after\\:w-\\[50px\\]:active::after {\n content: var(--tw-content);\n width: 50px;\n}\n.peer:checked ~ .peer-checked\\:bg-zinc-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(113 113 122 / var(--tw-bg-opacity));\n}\n.peer:checked ~ .peer-checked\\:fill-white {\n fill: #fff;\n}\n.peer:checked ~ .peer-checked\\:opacity-60 {\n opacity: 0.6;\n}\n.peer:checked ~ .peer-checked\\:opacity-70 {\n opacity: 0.7;\n}\n.peer:checked ~ .peer-checked\\:after\\:left-\\[105px\\]::after {\n content: var(--tw-content);\n left: 105px;\n}\n.peer:checked ~ .peer-checked\\:after\\:translate-x-\\[-100\\%\\]::after {\n content: var(--tw-content);\n --tw-translate-x: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y))\n rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))\n scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.peer:checked ~ .peer-checked\\:after\\:from-zinc-900::after {\n content: var(--tw-content);\n --tw-gradient-from: #18181b var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.peer:checked ~ .peer-checked\\:after\\:to-zinc-900::after {\n content: var(--tw-content);\n --tw-gradient-to: #18181b var(--tw-gradient-to-position);\n}\n"}

lovely-treefrog-86

👁 实时预览

📝 源代码