{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n

Heading

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore\n magni repudiandae tenetur odio\n

\n\n

learn more

\n \n \n

\n hover over the info icon\n

\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.left-0 {\n left: 0px;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.top-0 {\n top: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.flex {\n display: flex;\n}\n.h-\\[1\\.5em\\] {\n height: 1.5em;\n}\n.h-\\[10em\\] {\n height: 10em;\n}\n.h-\\[12em\\] {\n height: 12em;\n}\n.h-\\[3em\\] {\n height: 3em;\n}\n.w-\\[1\\.5em\\] {\n width: 1.5em;\n}\n.w-\\[16em\\] {\n width: 16em;\n}\n.w-\\[18em\\] {\n width: 18em;\n}\n.w-\\[3em\\] {\n width: 3em;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\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.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\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.translate-y-\\[100\\%\\] {\n --tw-translate-y: 100%;\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.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.justify-between {\n justify-content: space-between;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.rounded-\\[1\\.5em\\] {\n border-radius: 1.5em;\n}\n.border-\\[1px\\] {\n border-width: 1px;\n}\n.border-\\[\\#ffffffaa\\] {\n border-color: #ffffffaa;\n}\n.border-\\[rgba\\(107\\2c 33\\2c 168\\2c 1\\)\\] {\n border-color: rgba(107, 33, 168, 1);\n}\n.bg-\\[\\#8988885c\\] {\n background-color: #8988885c;\n}\n.bg-\\[rgba\\(107\\2c 33\\2c 168\\2c 0\\.24\\)\\] {\n background-color: rgba(107, 33, 168, 0.24);\n}\n.p-\\[1\\.5em\\] {\n padding: 1.5em;\n}\n.text-center {\n text-align: center;\n}\n.text-\\[0\\.7em\\] {\n font-size: 0.7em;\n}\n.text-\\[0\\.9em\\] {\n font-size: 0.9em;\n}\n.text-\\[1\\.5em\\] {\n font-size: 1.5em;\n}\n.text-\\[2em\\] {\n font-size: 2em;\n}\n.font-black {\n font-weight: 900;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-light {\n font-weight: 300;\n}\n.leading-\\[0\\.8em\\] {\n line-height: 0.8em;\n}\n.text-\\[hsl\\(0\\2c 0\\%\\2c 85\\%\\)\\] {\n --tw-text-opacity: 1;\n color: hsl(0 0% 85% / var(--tw-text-opacity));\n}\n.text-lime-300 {\n --tw-text-opacity: 1;\n color: rgb(190 242 100 / var(--tw-text-opacity));\n}\n.text-purple-950 {\n --tw-text-opacity: 1;\n color: rgb(59 7 100 / var(--tw-text-opacity));\n}\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n.backdrop-blur-\\[6px\\] {\n --tw-backdrop-blur: blur(6px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)\n var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)\n var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)\n var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)\n var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)\n var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)\n var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)\n var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)\n var(--tw-backdrop-sepia);\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.duration-\\[500ms\\] {\n transition-duration: 500ms;\n}\n.hover\\:h-\\[10em\\]:hover {\n height: 10em;\n}\n.hover\\:w-\\[16em\\]:hover {\n width: 16em;\n}\n.hover\\:rounded-\\[1\\.5em\\]:hover {\n border-radius: 1.5em;\n}\n.group:hover .group-hover\\:translate-y-0 {\n --tw-translate-y: 0px;\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.group:hover .group-hover\\:opacity-0 {\n opacity: 0;\n}\n"}

polite-sloth-0

👁 实时预览

📝 源代码