{"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":".flex {\n display: flex;\n}\n\n.w-full {\n width: 100%;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n@media (min-width: 640px) {\n .sm\\:p-10 {\n padding: 2.5rem;\n }\n}\n\n.relative {\n position: relative;\n}\n\n.border {\n border-width: 1px;\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n@media (min-width: 768px) {\n .md\\:px-0 {\n padding-left: 0;\n padding-right: 0;\n }\n\n .md\\:px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .lg\\:gap-10 {\n gap: 2.5rem;\n }\n\n .lg\\:py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n:is(.dark .dark\\:bg-brand) {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --foreground-rgb: #000;\n }\n}\n\n.max-w-sm {\n max-width: 24rem;\n}\n\n.rounded-xl {\n border-radius: 0.75rem;\n}\n\n.border-\\[rgba\\(255\\,255\\,255\\,0\\.10\\)\\] {\n border-color: hsla(0, 0%, 100%, 0.1);\n}\n\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.p-8 {\n padding: 2rem;\n}\n\n.shadow-\\[2px_4px_16px_0px_rgba\\(248\\,248\\,248\\,0\\.06\\)_inset\\] {\n --tw-shadow: 2px 4px 16px 0px hsla(0, 0%, 97%, 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\n:is(.dark .dark\\:bg-\\[rgba\\(40\\,40\\,40\\,0\\.70\\)\\]) {\n background-color: rgba(40, 40, 40, 0.7);\n}\n\n.z-40 {\n z-index: 40;\n}\n\n.bg-neutral-300 {\n --tw-bg-opacity: 1;\n background-color: rgb(212 212 212 / var(--tw-bg-opacity));\n}\n\n.\\[mask-image\\:radial-gradient\\(50\\%_50\\%_at_50\\%_50\\%\\,white_0\\%\\,transparent_100\\%\\)\\] {\n -webkit-mask-image: radial-gradient(\n 50% 50% at 50% 50%,\n #000 0,\n transparent 100%\n );\n mask-image: radial-gradient(50% 50% at 50% 50%, #000 0, transparent 100%);\n}\n\n@media (min-width: 768px) {\n .md\\:h-\\[20rem\\] {\n height: 20rem;\n }\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.font-semibold {\n font-weight: 600;\n}\n\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity));\n}\n\n:is(.dark .dark\\:text-white) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.font-normal {\n font-weight: 400;\n}\n\n.text-neutral-600 {\n --tw-text-opacity: 1;\n color: rgb(82 82 82 / var(--tw-text-opacity));\n}\n\n:is(.dark .dark\\:text-neutral-400) {\n --tw-text-opacity: 1;\n color: rgb(163 163 163 / var(--tw-text-opacity));\n}\n\n.h-full {\n height: 100%;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.flex-row {\n flex-direction: row;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.absolute {\n position: absolute;\n}\n\n.top-20 {\n top: 5rem;\n}\n\n.m-auto {\n margin: auto;\n}\n\n.h-40 {\n height: 10rem;\n}\n\n.w-px {\n width: 1px;\n}\n\n.animate-move {\n animation: move 5s linear infinite;\n}\n\n.bg-gradient-to-b {\n background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n\n.from-transparent {\n --tw-gradient-from: transparent var(--tw-gradient-from-position);\n --tw-gradient-to: transparent var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n\n.via-cyan-500 {\n --tw-gradient-to: rgba(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\n.to-transparent {\n --tw-gradient-to: transparent var(--tw-gradient-to-position);\n}\n\n.h-8 {\n height: 2rem;\n}\n\n.w-8 {\n width: 2rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.h-12 {\n height: 3rem;\n}\n\n.w-12 {\n width: 3rem;\n}\n\n.h-16 {\n height: 4rem;\n}\n\n.w-16 {\n width: 4rem;\n}\n\n.-left-10 {\n left: -2.5rem;\n}\n\n.top-1\\/2 {\n top: 50%;\n}\n\n.h-32 {\n height: 8rem;\n}\n\n.w-10 {\n width: 2.5rem;\n}\n\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n}\n\n.-translate-y-1\\/2 {\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\n.h-4 {\n height: 1rem;\n}\n\n.w-4 {\n width: 1rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.inset-0 {\n inset: 0;\n}\n\n.inline-block {\n display: inline-block;\n}\n\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity));\n}\n\n:is(.dark .dark\\:bg-white) {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n@keyframes move {\n 0% {\n transform: translateX(-200px);\n transform: translateX(-200px);\n }\n 100% {\n transform: translateX(200px);\n transform: translateX(200px);\n }\n}\n#style-ed6AE.style-ed6AE {\n will-change: transform;\n transform: translateY(-0.05094px);\n}\n#style-pvfli.style-pvfli {\n will-change: transform;\n transform: translateY(0px);\n}\n#style-co8vS.style-co8vS {\n will-change: transform;\n transform: translateY(0px);\n}\n#style-ce5cf.style-ce5cf {\n will-change: transform;\n transform: translateY(0px);\n}\n#style-cq179.style-cq179 {\n will-change: transform;\n transform: translateY(0px);\n}\n#style-85zWm.style-85zWm {\n position: absolute;\n top: 94.7378px;\n left: 17.28px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(1.12334);\n opacity: 1;\n}\n#style-LbmUy.style-LbmUy {\n position: absolute;\n top: 23.6802px;\n left: 12.1047px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.395521);\n opacity: 1;\n}\n#style-OTex5.style-OTex5 {\n position: absolute;\n top: 35.4375px;\n left: 13.9731px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(1.13813);\n opacity: 1;\n}\n#style-oUEf7.style-oUEf7 {\n position: absolute;\n top: 42.0762px;\n left: 25.4587px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.225724);\n opacity: 1;\n}\n#style-9lwEF.style-9lwEF {\n position: absolute;\n top: 104.982px;\n left: 19.196px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(1.06254);\n opacity: 1;\n}\n#style-VSPhh.style-VSPhh {\n position: absolute;\n top: 18.6269px;\n left: 35.18px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.430767);\n opacity: 1;\n}\n#style-YKMZp.style-YKMZp {\n position: absolute;\n top: 25.504px;\n left: 19.6629px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.775868);\n opacity: 1;\n}\n#style-D4K7j.style-D4K7j {\n position: absolute;\n top: 61.3206px;\n left: 10.669px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(1.12492);\n opacity: 1;\n}\n#style-61SdM.style-61SdM {\n position: absolute;\n top: 65.412px;\n left: 26.2222px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.714952);\n opacity: 1;\n}\n#style-xcj7O.style-xcj7O {\n position: absolute;\n top: 76.026px;\n left: 35.6904px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.0932895);\n opacity: 1;\n}\n#style-P6qK5.style-P6qK5 {\n position: absolute;\n top: 51.8203px;\n left: 21.9557px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(0.648569);\n opacity: 1;\n}\n#style-XRDvo.style-XRDvo {\n position: absolute;\n top: 71.8022px;\n left: 30.554px;\n width: 2px;\n height: 2px;\n border-radius: 50%;\n z-index: 1;\n will-change: opacity, transform;\n transform: scale(1.14523);\n opacity: 1;\n}\n"}

happy-insect-24

👁 实时预览

📝 源代码