{"html":"

ProgressBar.tsx\n

\n <Card>\n

\n <Text>Ticket Sales</Text>\n

\n <Metric>$ 71,465</Metric>\n

\n <FlexclassName=\"mt-3\">\n

\n <Text><Bold>32%</Bold>of annual target</Text>\n

\n <Text>$ 223,328</Text>\n

\n </Flex>\n

\n <ProgressBarvalue={ 32 }className=\"mt-3\"/>\n

\n </Card>\n

","css":".absolute {\n position: absolute\n}\n\n.relative {\n position: relative\n}\n\n.inset-x-0 {\n left: 0px;\n right: 0px\n}\n\n.top-2 {\n top: 0.5rem\n}\n\n.-ml-0 {\n margin-left: -0px\n}\n\n.-ml-0\\.5 {\n margin-left: -0.125rem\n}\n\n.ml-2 {\n margin-left: 0.5rem\n}\n\n.ml-3 {\n margin-left: 0.75rem\n}\n\n.ml-6 {\n margin-left: 1.5rem\n}\n\n.mr-1 {\n margin-right: 0.25rem\n}\n\n.mr-1\\.5 {\n margin-right: 0.375rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.mt-5 {\n margin-top: 1.25rem\n}\n\n.inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))\n}\n\n.space-y-1\\.5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-slate-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(15 23 42 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}\n\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem\n}\n\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n\n.pb-10 {\n padding-bottom: 2.5rem\n}\n\n.pl-3 {\n padding-left: 0.75rem\n}\n\n.pl-3\\.5 {\n padding-left: 0.875rem\n}\n\n.pt-3 {\n padding-top: 0.75rem\n}\n\n.text-center {\n text-align: center\n}\n\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-normal {\n font-weight: 400\n}\n\n.leading-4 {\n line-height: 1rem\n}\n\n.tracking-wide {\n letter-spacing: 0.025em\n}\n\n.text-blue-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n\n.text-green-500\\/20 {\n color: rgb(34 197 94 / 0.2)\n}\n\n.text-pink-400 {\n --tw-text-opacity: 1;\n color: rgb(244 114 182 / var(--tw-text-opacity))\n}\n\n.text-red-500\\/20 {\n color: rgb(239 68 68 / 0.2)\n}\n\n.text-slate-500 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n\n.text-violet-400 {\n --tw-text-opacity: 1;\n color: rgb(167 139 250 / var(--tw-text-opacity))\n}\n\n.text-yellow-500\\/20 {\n color: rgb(234 179 8 / 0.2)\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:-inset-0::before {\n content: var(--tw-content);\n inset: -0px\n}\n\n.before\\:-inset-0\\.5::before {\n content: var(--tw-content);\n inset: -0.125rem\n}\n\n.before\\:block::before {\n content: var(--tw-content);\n display: block\n}\n\n.before\\:rounded::before {\n content: var(--tw-content);\n border-radius: 0.25rem\n}\n\n.before\\:bg-blue-500\\/10::before {\n content: var(--tw-content);\n background-color: rgb(59 130 246 / 0.1)\n}"}

ugly-fly-91

👁 实时预览

📝 源代码