Surface unusual movement without losing context
Build an anomaly pulse strip with Tailwind CSS for an operations dashboard. Show four compact metrics with current value, expected range, deviation, and a tiny SVG sparkline. Highlight only the anomalous metric in amber and include a plain-language diagnosis plus an Investigate action. Keep normal metrics quiet and use tabular numerals.
.
Build an anomaly pulse strip with Tailwind CSS for an operations dashboard. Show four compact metrics with current value, expected range, deviation, and a tiny SVG sparkline. Highlight only the anomalous metric in amber and include a plain-language diagnosis plus an Investigate action. Keep normal metrics quiet and use tabular numerals.<section class="mx-auto max-w-5xl p-6"><div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm"><div class="grid divide-y divide-neutral-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4"><div class="p-5"><p class="text-xs text-neutral-400">API latency</p><div class="mt-2 flex items-end justify-between"><strong class="text-2xl tabular-nums text-neutral-900">184 ms</strong><span class="text-xs text-green-600">Normal</span></div><svg viewBox="0 0 120 28" class="mt-4 h-7 w-full text-neutral-300"><path d="M1 20L16 18L31 21L46 14L61 16L76 12L91 15L119 9" fill="none" stroke="currentColor" stroke-width="2" /></svg><p class="mt-2 text-[11px] text-neutral-400">Expected 140–220 ms</p></div><div class="bg-amber-50 p-5"><p class="text-xs text-amber-700">Checkout failures</p><div class="mt-2 flex items-end justify-between"><strong class="text-2xl tabular-nums text-neutral-900">3.8%</strong><span class="text-xs font-medium text-amber-700">+2.6σ</span></div><svg viewBox="0 0 120 28" class="mt-4 h-7 w-full text-amber-500"><path d="M1 22L16 21L31 22L46 20L61 21L76 18L91 19L105 7L119 4" fill="none" stroke="currentColor" stroke-width="2" /></svg><p class="mt-2 text-[11px] text-amber-700">Above expected 0.8–1.6%</p></div><div class="p-5"><p class="text-xs text-neutral-400">Queue depth</p><div class="mt-2 flex items-end justify-between"><strong class="text-2xl tabular-nums text-neutral-900">1,284</strong><span class="text-xs text-green-600">Normal</span></div><svg viewBox="0 0 120 28" class="mt-4 h-7 w-full text-neutral-300"><path d="M1 15L16 17L31 11L46 16L61 13L76 18L91 12L119 14" fill="none" stroke="currentColor" stroke-width="2" /></svg><p class="mt-2 text-[11px] text-neutral-400">Expected 900–1,500</p></div><div class="p-5"><p class="text-xs text-neutral-400">Cache hit rate</p><div class="mt-2 flex items-end justify-between"><strong class="text-2xl tabular-nums text-neutral-900">94.2%</strong><span class="text-xs text-green-600">Normal</span></div><svg viewBox="0 0 120 28" class="mt-4 h-7 w-full text-neutral-300"><path d="M1 14L16 12L31 13L46 11L61 12L76 10L91 11L119 9" fill="none" stroke="currentColor" stroke-width="2" /></svg><p class="mt-2 text-[11px] text-neutral-400">Expected 91–97%</p></div></div><div class="flex flex-col gap-3 border-t border-amber-200 bg-amber-50 px-5 py-4 sm:flex-row sm:items-center"><span class="h-2 w-2 shrink-0 rounded-full bg-amber-500"></span><p class="flex-1 text-sm text-amber-900">Failures began 11 minutes after payment gateway v4.8 was deployed.</p><button class="self-start rounded-lg bg-amber-900 px-3 py-2 text-xs font-medium text-white">Investigate</button></div></div></section>Build an anomaly pulse strip with Tailwind CSS for an operations dashboard. Show four compact metrics with current value, expected range, deviation, and a tiny SVG sparkline. Highlight only the anomalous metric in amber and include a plain-language diagnosis plus an Investigate action. Keep normal metrics quiet and use tabular numerals.