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

\n \n

\n \n \n \n

\n Damn good card\n

\n \n A card that showcases a set of tools that you use to create your product.\n

\n\n","css":".absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.inset-0 {\n inset: 0px;\n}\n.-left-10 {\n left: -2.5rem;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-20 {\n top: 5rem;\n}\n.z-40 {\n z-index: 40;\n}\n.m-auto {\n margin: auto;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.inline-block {\n display: inline-block;\n}\n.flex {\n display: flex;\n}\n.h-12 {\n height: 3rem;\n}\n.h-16 {\n height: 4rem;\n}\n.h-32 {\n height: 8rem;\n}\n.h-4 {\n height: 1rem;\n}\n.h-40 {\n height: 10rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-\\[15rem\\] {\n height: 15rem;\n}\n.h-full {\n height: 100%;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-16 {\n width: 4rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-full {\n width: 100%;\n}\n.w-px {\n width: 1px;\n}\n.max-w-sm {\n max-width: 24rem;\n}\n.flex-shrink-0 {\n flex-shrink: 0;\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.flex-row {\n flex-direction: row;\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.overflow-hidden {\n overflow: hidden;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-\\[rgba\\(255\\2c 255\\2c 255\\2c 0\\.10\\)\\] {\n border-color: rgba(255, 255, 255, 0.1);\n}\n.bg-\\[rgba\\(248\\2c 248\\2c 248\\2c 0\\.01\\)\\] {\n background-color: rgba(248, 248, 248, 0.01);\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.bg-neutral-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(212 212 212 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-cyan-500 {\n --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-transparent {\n --tw-gradient-to: transparent var(--tw-gradient-to-position);\n}\n.p-8 {\n padding: 2rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity));\n}\n.text-neutral-600 {\n --tw-text-opacity: 1;\n color: rgb(82 82 82 / var(--tw-text-opacity));\n}\n.shadow-\\[0px_0px_8px_0px_rgba\\(248\\2c\n 248\\2c\n 248\\2c\n 0\\.25\\)_inset\\2c\n 0px_32px_24px_-16px_rgba\\(0\\2c\n 0\\2c\n 0\\2c\n 0\\.40\\)\\] {\n --tw-shadow: 0px 0px 8px 0px rgba(248, 248, 248, 0.25) inset,\n 0px 32px 24px -16px rgba(0, 0, 0, 0.4);\n --tw-shadow-colored: inset 0px 0px 8px 0px var(--tw-shadow-color),\n 0px 32px 24px -16px 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.shadow-\\[2px_4px_16px_0px_rgba\\(248\\2c 248\\2c 248\\2c 0\\.06\\)_inset\\] {\n --tw-shadow: 2px 4px 16px 0px rgba(248, 248, 248, 0.06) inset;\n --tw-shadow-colored: inset 2px 4px 16px 0px 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.\\[mask-image\\:radial-gradient\\(50\\%_50\\%_at_50\\%_50\\%\\2c\n white_0\\%\\2c\n transparent_100\\%\\)\\] {\n -webkit-mask-image: radial-gradient(\n 50% 50% at 50% 50%,\n white 0%,\n transparent 100%\n );\n mask-image: radial-gradient(50% 50% at 50% 50%, white 0%, transparent 100%);\n}\n@media (min-width: 768px) {\n .md\\:h-\\[20rem\\] {\n height: 20rem;\n }\n}\n@media (prefers-color-scheme: dark) {\n .dark\\:bg-\\[rgba\\(40\\2c 40\\2c 40\\2c 0\\.70\\)\\] {\n background-color: rgba(40, 40, 40, 0.7);\n }\n .dark\\:bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n }\n .dark\\:text-neutral-400 {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n }\n .dark\\:text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n }\n}\n"}

big-chipmunk-8

👁 实时预览

📝 源代码