{"html":"

\n \n \n \n

BASIC

\n $\n 15\n /month\n

\n \n

\n \n \n \n

STANDART

\n $\n 30\n /month\n

\n \n

\n \n \n \n

PREMIUM

\n $\n 60\n /month\n

\n \n

","css":".wrapper {\n position: relative;\n display: flex;\n flex-direction: row;\n gap: 10px;\n}\n\n.card {\n position: relative;\n width: 150px;\n height: 100px;\n background: #fff;\n border-radius: 10px;\n transition: all 0.3s;\n}\n\n.card:hover {\n transform: scale(1.05);\n}\n\n.input {\n position: relative;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n cursor: pointer;\n appearance: none;\n border: 1px solid #e5e5e5;\n border-radius: 10px;\n z-index: 10;\n box-shadow: 1px 1px 10px #aaaaaa,\n -1px -1px 10px #ffffff;\n}\n\n.input + .check::before {\n content: \"\";\n position: absolute;\n top: 15px;\n right: 15px;\n width: 16px;\n height: 16px;\n border: 2px solid #d0d0d0;\n border-radius: 50%;\n background-color: #E8E8E8;\n}\n\n.input:checked + .check::after {\n content: '';\n position: absolute;\n top: 19px;\n right: 19px;\n width: 12px;\n height: 12px;\n background-color: rgba(255,0,0,0.7);\n border-radius: 50%;\n}\n\n.input[value=\"standart\"]:checked + .check::after {\n background-color: rgba(255,165,0,0.7);\n}\n\n.input[value=\"premium\"]:checked + .check::after {\n background-color: rgba(0,128,0,0.7);\n}\n\n.input[value=\"basic\"]:checked {\n border: 1.5px solid rgba(255,0,0,0.7);\n}\n\n.input[value=\"standart\"]:checked {\n border: 1.5px solid rgba(255,165,0,0.7);\n}\n\n.input[value=\"premium\"]:checked {\n border: 1.5px solid rgba(0,128,0,0.7);\n}\n\n.label {\n color: #323232;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n}\n\n.label .title {\n margin: 15px 0 0 15px;\n font-weight: 900;\n font-size: 15px;\n letter-spacing: 1.5px;\n}\n\n.label .price {\n margin: 20px 0 0 15px;\n font-size: 20px;\n font-weight: 900;\n}\n\n.label .span {\n color: gray;\n font-weight: 700;\n font-size: 15px;\n}\n"}

dry-elephant-32

👁 实时预览

📝 源代码