{"html":"

\n \n \n

\n \n Monthly\n

\n $30/mo\n $30 billed every month\n

\n \n

\n \n Annualy\n

\n $15/mo\n $180 billed once a year\n

\n save up to 50%\n \n

\n","css":".radio-input input {\n display: none;\n}\n\n.radio-input label {\n --border-color: #a1b0d8;\n\n border: 1px solid var(--border-color);\n border-radius: 6px;\n min-width: 5rem;\n margin: 1rem;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n position: relative;\n align-items: center;\n}\n\n.radio-input input:checked + label {\n --border-color: #2f64d8;\n border-color: var(--border-color);\n border-width: 2px;\n}\n.radio-input label:hover {\n --border-color: #2f64d8;\n border-color: var(--border-color);\n}\n\n.radio-input {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: column;\n}\n\n.circle {\n display: inline-block;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgb(189, 187, 207);\n margin-right: 0.5rem;\n position: relative;\n}\n\n.radio-input input:checked + label span.circle::before {\n content: \"\";\n display: inline;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #2f64d8;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n}\n.text {\n display: flex;\n align-items: center;\n}\n\n.price {\n display: flex;\n flex-direction: column;\n text-align: right;\n font-weight: bold;\n}\n\n.small {\n font-size: 10px;\n color: rgb(136, 138, 139);\n font-weight: 100;\n}\n\n.info {\n position: absolute;\n display: inline-block;\n font-size: 11px;\n background-color: rgb(31, 236, 123);\n border-radius: 20px;\n padding: 1px 9px;\n top: 0;\n transform: translateY(-50%);\n right: 5px;\n}\n"}

purple-gecko-48

👁 实时预览

📝 源代码