{"html":"

\n \n \n \n \n \n \n\n

\n \n Label\n (Sublabel)\n \n

A short description goes here.

\n \n \n \n \n

\n","css":".switch-container {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n padding: 16px;\n border: 1px dashed #666;\n border-radius: 8px;\n background-color: #1a1a1a;\n max-width: 500px;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);\n}\n\n.switch {\n position: relative;\n display: inline-block;\n width: 32px;\n height: 16px;\n margin-top: 4px;\n flex-shrink: 0;\n}\n\n.switch .input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #444;\n border-radius: 20px;\n transition: 0.2s;\n}\n\n.slider::before {\n position: absolute;\n content: \"\";\n height: 12px;\n width: 12px;\n left: 2px;\n bottom: 2px;\n background-color: white;\n border-radius: 50%;\n transition: 0.2s;\n}\n\n.input:checked + .slider {\n background-color: #4f46e5; /* Tailwind's primary/indigo */\n}\n\n.input:checked + .slider::before {\n transform: translateX(16px);\n}\n\n.content {\n display: flex;\n gap: 12px;\n align-items: flex-start;\n}\n\n.icon {\n flex-shrink: 0;\n}\n\n.text-content {\n display: grid;\n gap: 6px;\n}\n\n.main-label {\n font-weight: 600;\n font-size: 14px;\n color: #ccc;\n}\n\n.sublabel {\n font-size: 12px;\n color: #aaa;\n font-weight: 400;\n margin-left: 4px;\n}\n\n.description {\n font-size: 12px;\n color: #888;\n}\n"}

hungry-panda-36

👁 实时预览

📝 源代码