galaxy/Cards/emmanuelh-dev_ugly-fly-91.html

<!-- From Uiverse.io by emmanuelh-dev - Tags: instagram, card, tailwind -->
<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">&lt;</span><span class="text-pink-400">Card</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</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">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Metric</span><span class="text-slate-500">&gt;</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">&lt;/</span><span class="text-pink-400">Metric</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</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">&gt;</span>
    </p>
    <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span><span class="text-slate-500">&lt;</span><span class="text-pink-400">Bold</span><span class="text-slate-500">&gt;</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">&lt;/</span><span class="text-pink-400">Bold</span><span class="text-slate-500">&gt;</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">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-6 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</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">&lt;/</span><span class="text-pink-400">Text</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;/</span><span class="text-pink-400">Flex</span><span class="text-slate-500">&gt;</span>
    </p>
    <p class="ml-3 font-mono text-xs font-normal leading-4 tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;</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">/&gt;</span>
    </p>
    <p class="font-mono text-xs font-normal tracking-wide text-violet-400">
      <span class="text-slate-500">&lt;/</span><span class="text-pink-400">Card</span><span class="text-slate-500">&gt;</span>
    </p>
  </div>
</div>