Offline State

Application cannot currently reach required services.

html

<div class="offline" role="alert">
  <span class="offline__icon offline__icon--retrying" aria-hidden="true"></span>
  <div class="offline__body">
    <p class="offline__title">You are offline</p>
    <p class="offline__message">We cannot reach the server. Changes will sync once you reconnect.</p>
    <p class="offline__meta">Last synced 3 minutes ago · reconnecting…</p>
  </div>
</div>
<style>
.offline { display: flex; align-items: flex-start; gap: 12px; max-width: 380px; padding: 14px 16px; box-sizing: border-box;
  border-radius: 10px; background: color-mix(in srgb, #8C1F17 8%, #FAF7F2); border: 1px solid #8C1F17; font: 13.5px/1.45 system-ui, sans-serif; color: #241430; }
.offline__icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: #8C1F17; position: relative; margin-top: 1px; }
.offline__icon::before { content: "⚡"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #FAF7F2; }
@keyframes offline-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .offline__icon--retrying { animation: offline-spin .2s linear infinite; }
}
.offline__title { margin: 0 0 2px; font-weight: 700; }
.offline__message { margin: 0; color: #241430b3; }
.offline__meta { margin: 6px 0 0; font-size: 11.5px; color: #8C1F17; font-weight: 600; }
</style>

tailwind

<div role="alert" class="offline-tw flex items-start gap-3 max-w-sm px-4 py-3.5 box-border rounded-lg border border-[#8C1F17] font-sans text-[13.5px] text-[#241430]" style="background:color-mix(in srgb, #8C1F17 8%, #FAF7F2)">
  <span aria-hidden="true" class="offline-tw__icon offline-tw__icon--retrying w-[22px] h-[22px] rounded-full flex-shrink-0 bg-[#8C1F17] mt-px grid place-items-center text-[11px] text-[#FAF7F2]">⚡</span>
  <div>
    <p class="m-0 mb-0.5 font-bold">You are offline</p>
    <p class="m-0 text-[#241430]/70">We cannot reach the server. Changes will sync once you reconnect.</p>
    <p class="mt-1.5 mb-0 text-[11.5px] text-[#8C1F17] font-semibold">Last synced 3 minutes ago · reconnecting…</p>
  </div>
</div>
<style>
@keyframes offline-tw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .offline-tw__icon--retrying { animation: offline-tw-spin .2s linear infinite; }
}
</style>

react

export function OfflineState({
  title = "You are offline",
  message = "We cannot reach the server. Changes will sync once you reconnect.",
  lastSynced = "3 minutes ago",
  retrying = true,
}) {
  return (
    <div role="alert" style={{ display: "flex", alignItems: "flex-start", gap: 12, maxWidth: 380, padding: "14px 16px",
      boxSizing: "border-box", borderRadius: 10, background: "color-mix(in srgb, #8C1F17 8%, #FAF7F2)",
      border: "1px solid #8C1F17", font: "13.5px/1.45 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" className={retrying ? "offline-react__icon offline-react__icon--retrying" : "offline-react__icon"} style={{ width: 22, height: 22, borderRadius: "50%", flexShrink: 0, background: "#8C1F17",
        marginTop: 1, display: "grid", placeItems: "center", fontSize: 11, color: "#FAF7F2" }}>⚡</span>
      <div>
        <p style={{ margin: "0 0 2px", fontWeight: 700 }}>{title}</p>
        <p style={{ margin: 0, color: "#241430b3" }}>{message}</p>
        <p style={{ margin: "6px 0 0", fontSize: 11.5, color: "#8C1F17", fontWeight: 600 }}>Last synced {lastSynced}{retrying ? " · reconnecting…" : ""}</p>
      </div>
      <style>{`
        @keyframes offline-react-spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: no-preference) {
          .offline-react__icon--retrying { animation: offline-react-spin .2s linear infinite; }
        }
      `}</style>
    </div>
  );
}