{"html":"\n \n \n \n \n \n \n \n \n\n","css":".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.left-4{left:1rem}.right-4{right:1rem}.top-4{top:1rem}.z-20{z-index:20}.h-10{height:2.5rem}.h-\\[74px\\]{height:74px}.w-10{width:2.5rem}.w-\\[144px\\]{width:144px}.-rotate-90{--tw-rotate:-90deg;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}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fill-black{fill:#000}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:left-2::after{content:var(--tw-content);left:0.5rem}.after\\:top-2::after{content:var(--tw-content);top:0.5rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-\\[58px\\]::after{content:var(--tw-content);height:58px}.after\\:w-\\[58px\\]::after{content:var(--tw-content);width:58px}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-black::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.after\\:transition-all::after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.after\\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.after\\:ease-in-out::after{content:var(--tw-content);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:bg-rose-50:hover{--tw-bg-opacity:1;background-color:rgb(255 241 242 / var(--tw-bg-opacity))}.peer:checked ~ .peer-checked\\:translate-x-\\[72px\\]{--tw-translate-x:72px;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\\:rotate-0{--tw-rotate:0deg;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\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.peer:checked ~ .peer-checked\\:opacity-0{opacity:0}.peer:checked ~ .peer-checked\\:opacity-100{opacity:1}.peer:checked ~ .after\\:peer-checked\\:translate-x-\\[72px\\]::after{content:var(--tw-content);--tw-translate-x:72px;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 ~ .after\\:peer-checked\\:bg-rose-50::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 241 242 / var(--tw-bg-opacity))}"}

friendly-sheep-29

👁 实时预览

📝 源代码