Viral Ready Status Badge

<div class="inline-flex">
  <style>@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

    .viral-badge-comp {
      font-family: 'Satoshi', 'Helvetica Neue', sans-serif;
    }

    @keyframes ping {
      75%, 100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    .viral-badge-comp .animate-ping {
      animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }</style>
  <span class="viral-badge-comp text-[11px] uppercase font-medium border
    border-amber-500/30 px-2.5 py-1.5 rounded-md bg-amber-500/10
    flex items-center gap-2 tracking-wider text-amber-400">
    <span class="relative flex h-2 w-2">
      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
    </span>
  </span>
</div>