Live counter ticker

Create a live activity strip with Tailwind CSS. Use a full-width neutral-950 band containing a max-w-5xl flex row that wraps: on the left, a pill with a pulsing green dot reading "Live", a large monospaced counter with thousands separators, and a small label beneath reading events processed today. In the middle, a thin vertical rule and two secondary figures stacked with muted labels — active regions and current throughput per second. On the right, a compact bar chart of twelve slim vertical bars in varying heights representing the last twelve minutes, with the newest bar highlighted in green. Then add JavaScript that increments the main counter by a small random amount several times a second with a brief highlight flash on change, updates the throughput figure every two seconds, and every five seconds shifts the bar chart left by dropping the first bar and appending a new one with a random height.

<section class="bg-neutral-950 px-6 py-10 text-white">
  <div class="mx-auto flex max-w-5xl flex-wrap items-center gap-8">
    <div class="min-w-[220px]">
      <span class="inline-flex items-center gap-2 rounded-full border border-neutral-800 px-2.5 py-1 text-[11px] font-medium uppercase tracking-widest text-neutral-400">
        <span class="relative flex h-1.5 w-1.5">
          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
          <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
        </span>
        Live
      </span>
      <p id="tickerValue" class="mt-3 font-mono text-4xl font-semibold tracking-tight transition-colors duration-300">4,281,904</p>
      <p class="mt-1 text-xs text-neutral-500">Events processed today</p>
    </div>

    <div class="h-14 w-px bg-neutral-800"></div>

    <div class="flex gap-10">
      <div>
        <p class="font-mono text-xl font-semibold">14</p>
        <p class="mt-1 text-xs text-neutral-500">Active regions</p>
      </div>
      <div>
        <p id="tickerRate" class="font-mono text-xl font-semibold">3,140/s</p>
        <p class="mt-1 text-xs text-neutral-500">Throughput now</p>
      </div>
    </div>

    <div class="ml-auto">
      <div id="tickerBars" class="flex h-14 items-end gap-1.5">
        <span class="w-2 rounded-sm bg-neutral-700" style="height:40%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:62%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:48%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:75%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:55%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:82%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:60%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:70%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:52%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:88%"></span>
        <span class="w-2 rounded-sm bg-neutral-700" style="height:64%"></span>
        <span class="w-2 rounded-sm bg-green-500" style="height:78%"></span>
      </div>
      <p class="mt-2 text-right text-xs text-neutral-500">Last 12 minutes</p>
    </div>
  </div>
</section>

var value = document.getElementById("tickerValue");
var rate = document.getElementById("tickerRate");
var bars = document.getElementById("tickerBars");
var total = 4281904;

function paint() {
  value.textContent = total.toLocaleString("en-US");
  value.classList.add("text-green-400");
  setTimeout(function () {
    value.classList.remove("text-green-400");
  }, 180);
}

setInterval(function () {
  total += Math.floor(40 + Math.random() * 260);
  paint();
}, 400);

setInterval(function () {
  rate.textContent = (2600 + Math.floor(Math.random() * 900)).toLocaleString("en-US") + "/s";
}, 2000);

setInterval(function () {
  // Drop the oldest minute, append a fresh one, and keep the newest highlighted.
  bars.removeChild(bars.firstElementChild);
  Array.prototype.forEach.call(bars.children, function (b) {
    b.className = "w-2 rounded-sm bg-neutral-700";
  });
  var next = document.createElement("span");
  next.className = "w-2 rounded-sm bg-green-500";
  next.style.height = 35 + Math.floor(Math.random() * 60) + "%";
  bars.appendChild(next);
}, 5000);