{"html":"

\n \n \n \n \n \n \n male\n \n

\n \n \n \n \n \n \n \n \n female\n \n

\n \n\n

\n \n \n \n

\n \n\n","css":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.flex {\n display: flex;\n}\n.h-16 {\n height: 4rem;\n}\n.h-7 {\n height: 1.75rem;\n}\n.h-8 {\n height: 2rem;\n}\n.w-24 {\n width: 6rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-8 {\n width: 2rem;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.flex-col {\n flex-direction: column;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.fill-current {\n fill: currentColor;\n}\n.fill-gray-100 {\n fill: #f3f4f6;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.hover\\:border-blue-400:hover {\n --tw-border-opacity: 1;\n border-color: rgb(96 165 250 / var(--tw-border-opacity));\n}\n.active\\:scale-95:active {\n --tw-scale-x: 0.95;\n --tw-scale-y: 0.95;\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\\:border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity));\n}\n.peer:checked ~ .peer-checked\\:fill-blue-500 {\n fill: #3b82f6;\n}\n.peer:checked ~ .peer-checked\\:text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity));\n}\n.peer:checked ~ .peer-checked\\:shadow-md {\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.peer:checked ~ .peer-checked\\:shadow-blue-400 {\n --tw-shadow-color: #60a5fa;\n --tw-shadow: var(--tw-shadow-colored);\n}\n"}

rare-eagle-99

👁 实时预览

📝 源代码