Build a status panel with Tailwind CSS that reports uptime per service. A bordered card whose header holds "System status" on the left and a green pill reading "All systems operational" with a pulsing dot on the right. Below it, one row per service — API, Dashboard, Webhooks, Email delivery — each row showing the service name and its 60-day uptime percentage on one line, then an empty flex container marked with a data-uptime attribute that will hold the history bars. Close the card with a legend row of tiny colour swatches and the labels "60 days ago" and "Today" pushed to opposite ends. Then add JavaScript that renders the bars from data instead of markup: use a small seeded pseudo-random generator so the same history appears on every load, mark roughly 2% of days as an outage and 4% as degraded, paint each day green, amber or red, give each bar a title tooltip with its date and status, compute the uptime percentage per service by weighting degraded days as partial, and downgrade the header pill to amber if any service is not fully green.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a status panel with Tailwind CSS that reports uptime per service. A bordered card whose header holds "System status" on the left and a green pill reading "All systems operational" with a pulsing dot on the right. Below it, one row per service — API, Dashboard, Webhooks, Email delivery — each row showing the service name and its 60-day uptime percentage on one line, then an empty flex container marked with a data-uptime attribute that will hold the history bars. Close the card with a legend row of tiny colour swatches and the labels "60 days ago" and "Today" pushed to opposite ends. Then add JavaScript that renders the bars from data instead of markup: use a small seeded pseudo-random generator so the same history appears on every load, mark roughly 2% of days as an outage and 4% as degraded, paint each day green, amber or red, give each bar a title tooltip with its date and status, compute the uptime percentage per service by weighting degraded days as partial, and downgrade the header pill to amber if any service is not fully green.
var DAYS = 60;
var SERVICES = { api: 11, dashboard: 29, webhooks: 5, email: 47 }; // name -> seed
// Seeded generator: the same history renders on every load, which is what a
// status page should do. Swap this for your real incident data.
function generator(seed) {
var state = seed;
return function () {
state = (state * 1664525 + 1013904223) % 4294967296;
return state / 4294967296;
};
}
var COLORS = { up: "bg-green-500", degraded: "bg-amber-400", down: "bg-red-500" };
var WEIGHT = { up: 0, degraded: 0.3, down: 1 };
var allGreen = true;
Object.keys(SERVICES).forEach(function (name) {
var strip = document.querySelector('[data-uptime="' + name + '"]');
var value = document.querySelector('[data-uptime-value="' + name + '"]');
var random = generator(SERVICES[name]);
var lost = 0;
for (var i = 0; i < DAYS; i++) {
var roll = random();
var state = roll < 0.02 ? "down" : roll < 0.06 ? "degraded" : "up";
lost += WEIGHT[state];
if (state !== "up") allGreen = false;
var day = new Date(Date.now() - (DAYS - 1 - i) * 86400000);
var bar = document.createElement("span");
bar.className = "flex-1 rounded-sm transition hover:opacity-70 " + COLORS[state];
bar.title = day.toDateString() + " — " + state;
strip.appendChild(bar);
}
value.textContent = ((1 - lost / DAYS) * 100).toFixed(2) + "% uptime";
});
if (!allGreen) {
var pill = document.getElementById("statusPill");
pill.className = "inline-flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700";
pill.innerHTML = '<span class="h-2 w-2 rounded-full bg-amber-500"></span> Incidents in the last 60 days';
}
