Viewport

Visible browser area.

html

<div class="vp-demo">
  <div class="vp-demo__frame vp-demo__frame--desktop">
    <div class="vp-demo__chrome" style="background:#241430;">
      <span class="vp-demo__dot"></span><span class="vp-demo__dot"></span><span class="vp-demo__dot"></span>
      <span class="vp-demo__url">clydeford.net</span>
    </div>
    <div class="vp-demo__viewport">Visible viewport area</div>
  </div>
</div>
<style>
.vp-demo { font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; display: flex; justify-content: center; }
.vp-demo__frame { width: 100%; max-width: 420px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px rgba(36,20,48,.18); background: #fff; }
.vp-demo__frame--mobile { max-width: 200px; }
.vp-demo__chrome { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.vp-demo__dot { width: 8px; height: 8px; border-radius: 50%; background: #FAF7F255; }
.vp-demo__url { margin-left: 8px; background: #FAF7F222; color: #FAF7F2; border-radius: 4px; padding: 2px 8px; font-size: 11px; flex: 1; }
.vp-demo__viewport { height: 110px; display: flex; align-items: center; justify-content: center; color: #24143066; background: repeating-linear-gradient(45deg, #24143006 0 8px, transparent 8px 16px); }
</style>

tailwind

<div class="font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4 flex justify-center">
  <div class="w-full rounded-[10px] overflow-hidden shadow-lg bg-white vp-tw vp-tw--desktop">
    <div class="flex items-center gap-1.5 px-2.5 py-2" style="background:#241430;">
      <span class="w-2 h-2 rounded-full bg-[#FAF7F2]/35"></span><span class="w-2 h-2 rounded-full bg-[#FAF7F2]/35"></span><span class="w-2 h-2 rounded-full bg-[#FAF7F2]/35"></span>
      <span class="ml-2 bg-[#FAF7F2]/15 text-[#FAF7F2] rounded px-2 py-0.5 text-[11px] flex-1">clydeford.net</span>
    </div>
    <div class="h-[110px] flex items-center justify-center text-[#24143066]" style="background-image:repeating-linear-gradient(45deg, #24143006 0 8px, transparent 8px 16px);">Visible viewport area</div>
  </div>
</div>
<style>
.vp-tw--mobile { max-width: 200px; }
.vp-tw--desktop { max-width: 420px; }
</style>

react

export function Viewport({
  url = "clydeford.net",
  device = "desktop",
  accent = "#241430",
  addressBar = true,
}) {
  const maxWidth = device === "mobile" ? 200 : 420;
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430", background: "#FAF7F2", padding: 16, display: "flex", justifyContent: "center" }}>
      <div style={{ width: "100%", maxWidth, borderRadius: 10, overflow: "hidden", boxShadow: "0 10px 24px rgba(36,20,48,.18)", background: "#fff" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", background: accent }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FAF7F255" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FAF7F255" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FAF7F255" }} />
          {addressBar && <span style={{ marginLeft: 8, background: "#FAF7F222", color: "#FAF7F2", borderRadius: 4, padding: "2px 8px", fontSize: 11, flex: 1 }}>{url}</span>}
        </div>
        <div style={{ height: 110, display: "flex", alignItems: "center", justifyContent: "center", color: "#24143066", backgroundImage: "repeating-linear-gradient(45deg, #24143006 0 8px, transparent 8px 16px)" }}>Visible viewport area</div>
      </div>
    </div>
  );
}