پیشنمایش زنده
کد HTML
<div class="relative rounded-lg bg-slate-900 p-2">
<div class="relative flex text-center">
<div class="flex pl-3.5 pt-3"><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.5 mr-1.5 h-3 w-3 text-red-500/20">
<circle r="12" cy="12" cx="12"></circle>
</svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-yellow-500/20">
<circle r="12" cy="12" cx="12"></circle>
</svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-green-500/20">
<circle r="12" cy="12" cx="12"></circle>
</svg></div><span class="absolute inset-x-0 top-2 text-xs text-slate-500">ProgressBar.tsx</span>
</div>
<div class="mt-5 space-y-1.5 px-5 pb-10">
<p class="mt-4 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Card</span><span class="text-slate-500">></span>
</p>
<p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">Ticket Sales</span></span><span class="text-slate-500"></</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span>
</p>
<p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Metric</span><span class="text-slate-500">></span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">$ 71,465</span></span><span class="text-slate-500"></</span><span class="text-pink-400">Metric</span><span class="text-slate-500">></span>
</p>
<p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Flex</span><span class="ml-2 text-violet-400">className<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">"mt-3"</span></span></span><span class="text-slate-500">></span>
</p>
<p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span><span class="text-slate-500"><</span><span class="text-pink-400">Bold</span><span class="text-slate-500">></span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">32%</span></span><span class="text-slate-500"></</span><span class="text-pink-400">Bold</span><span class="text-slate-500">></span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">of annual target</span></span><span class="text-slate-500"></</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span>
</p>
<p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">$ 223,328</span></span><span class="text-slate-500"></</span><span class="text-pink-400">Text</span><span class="text-slate-500">></span>
</p>
<p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"></</span><span class="text-pink-400">Flex</span><span class="text-slate-500">></span>
</p>
<p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
<span class="text-slate-500"><</span><span class="text-pink-400">ProgressBar</span><span class="ml-2 text-violet-400">value<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">{ 32 }</span></span></span><span class="ml-2 text-violet-400">className<span class="text-slate-500">=</span><span class="relative inline-block px-1 before:absolute before:-inset-0.5 before:block before:rounded before:bg-blue-500/10"><span class="relative text-blue-400">"mt-3"</span></span></span><span class="text-slate-500">/></span>
</p>
<p class="font-mono text-xs font-normal tracking-wide text-violet-400">
<span class="text-slate-500"></</span><span class="text-pink-400">Card</span><span class="text-slate-500">></span>
</p>
</div>
</div>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.inset-x-0 {
left: 0px;
right: 0px
}
.top-2 {
top: 0.5rem
}
.-ml-0 {
margin-left: -0px
}
.-ml-0\.5 {
margin-left: -0.125rem
}
.ml-2 {
margin-left: 0.5rem
}
.ml-3 {
margin-left: 0.75rem
}
.ml-6 {
margin-left: 1.5rem
}
.mr-1 {
margin-right: 0.25rem
}
.mr-1\.5 {
margin-right: 0.375rem
}
.mt-4 {
margin-top: 1rem
}
.mt-5 {
margin-top: 1.25rem
}
.inline-block {
display: inline-block
}
.flex {
display: flex
}
.h-3 {
height: 0.75rem
}
.w-3 {
width: 0.75rem
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse))
}
.rounded-lg {
border-radius: 0.5rem
}
.bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem
}
.pb-10 {
padding-bottom: 2.5rem
}
.pl-3 {
padding-left: 0.75rem
}
.pl-3\.5 {
padding-left: 0.875rem
}
.pt-3 {
padding-top: 0.75rem
}
.text-center {
text-align: center
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-normal {
font-weight: 400
}
.leading-4 {
line-height: 1rem
}
.tracking-wide {
letter-spacing: 0.025em
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity))
}
.text-green-500\/20 {
color: rgb(34 197 94 / 0.2)
}
.text-pink-400 {
--tw-text-opacity: 1;
color: rgb(244 114 182 / var(--tw-text-opacity))
}
.text-red-500\/20 {
color: rgb(239 68 68 / 0.2)
}
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity))
}
.text-violet-400 {
--tw-text-opacity: 1;
color: rgb(167 139 250 / var(--tw-text-opacity))
}
.text-yellow-500\/20 {
color: rgb(234 179 8 / 0.2)
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute
}
.before\:-inset-0::before {
content: var(--tw-content);
inset: -0px
}
.before\:-inset-0\.5::before {
content: var(--tw-content);
inset: -0.125rem
}
.before\:block::before {
content: var(--tw-content);
display: block
}
.before\:rounded::before {
content: var(--tw-content);
border-radius: 0.25rem
}
.before\:bg-blue-500\/10::before {
content: var(--tw-content);
background-color: rgb(59 130 246 / 0.1)
}