#e8e8e8
HTML +TailwindCSS
1<div class="relative rounded-lg bg-slate-900 p-2"> 2 <div class="relative flex text-center"> 3 <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"> 4 <circle r="12" cy="12" cx="12"></circle> 5 </svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-yellow-500/20"> 6 <circle r="12" cy="12" cx="12"></circle> 7 </svg><svg viewBox="0 0 24 24" fill="currentColor" class="-ml-0.75 mr-1.5 h-3 w-3 text-green-500/20"> 8 <circle r="12" cy="12" cx="12"></circle> 9 </svg></div><span class="absolute inset-x-0 top-2 text-xs text-slate-500">ProgressBar.tsx</span> 10 </div> 11 <div class="mt-5 space-y-1.5 px-5 pb-10"> 12 <p class="mt-4 font-mono text-xs font-normal tracking-wide text-violet-400"> 13 <span class="text-slate-500"><</span><span class="text-pink-400">Card</span><span class="text-slate-500">></span> 14 </p> 15 <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400"> 16 <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> 17 </p> 18 <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400"> 19 <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> 20 </p> 21 <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400"> 22 <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> 23 </p> 24 <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400"> 25 <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> 26 </p> 27 <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400"> 28 <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> 29 </p> 30 <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400"> 31 <span class="text-slate-500"></</span><span class="text-pink-400">Flex</span><span class="text-slate-500">></span> 32 </p> 33 <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400"> 34 <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> 35 </p> 36 <p class="font-mono text-xs font-normal tracking-wide text-violet-400"> 37 <span class="text-slate-500"></</span><span class="text-pink-400">Card</span><span class="text-slate-500">></span> 38 </p> 39 </div> 40</div>
Comments
MIT License