Document Viewer

Displays documents.

html

<div class="docv">
  <div class="docv__toolbar" style="background:#BFD9F2;">
    <span class="docv__title">Annual-report.docx</span>
    <span class="docv__zoom">100%</span>
  </div>
  <div class="docv__page" data-zoom="100%">
    <span class="docv__line"></span><span class="docv__line"></span><span class="docv__line docv__line--short"></span>
  </div>
  <p class="docv__status">Page 2 of 8</p>
</div>
<style>
.docv { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; border-radius: 10px; overflow: hidden; box-sizing: border-box; border: 1px solid #24143018; }
.docv__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-weight: 700; color: #14351f; }
.docv__page { background: #24143008; padding: 20px 18px; min-height: 90px; }
.docv__page[data-zoom="150%"] { padding: 30px 18px; }
.docv__line { display: block; height: 8px; background: #24143022; border-radius: 4px; margin-bottom: 8px; }
.docv__line--short { width: 60%; }
.docv__status { margin: 0; padding: 8px 12px; font-size: 12px; color: #24143099; text-align: center; }
</style>

tailwind

<div class="w-[300px] rounded-[10px] overflow-hidden box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] docv-tw">
  <div class="flex items-center justify-between px-3 py-2 font-bold text-[#14351f]" style="background:#BFD9F2">
    <span>Annual-report.docx</span>
    <span>100%</span>
  </div>
  <div class="bg-[#24143008] px-[18px] py-5 min-h-[90px] docv-tw-page" data-zoom="100%">
    <span class="block h-2 bg-[#24143022] rounded mb-2"></span><span class="block h-2 bg-[#24143022] rounded mb-2"></span><span class="block h-2 bg-[#24143022] rounded mb-2 w-3/5"></span>
  </div>
  <p class="m-0 px-3 py-2 text-xs text-[#241430]/60 text-center">Page 2 of 8</p>
</div>
<style>
.docv-tw-page[data-zoom="150%"] { padding-top: 30px; padding-bottom: 30px; }
</style>

react

export function DocumentViewer({
  title = "Annual-report.docx",
  page = "2",
  zoom = "100%",
  accent = "#BFD9F2",
}) {
  const pagePad = zoom === "150%" ? "30px 18px" : "20px 18px";
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, borderRadius: 10, overflow: "hidden", boxSizing: "border-box", border: "1px solid #24143018" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 12px", fontWeight: 700, color: "#14351f", background: accent }}>
        <span>{title}</span>
        <span>{zoom}</span>
      </div>
      <div style={{ background: "#24143008", padding: pagePad, minHeight: 90 }}>
        <span style={{ display: "block", height: 8, background: "#24143022", borderRadius: 4, marginBottom: 8 }} />
        <span style={{ display: "block", height: 8, background: "#24143022", borderRadius: 4, marginBottom: 8 }} />
        <span style={{ display: "block", height: 8, background: "#24143022", borderRadius: 4, marginBottom: 8, width: "60%" }} />
      </div>
      <p style={{ margin: 0, padding: "8px 12px", fontSize: 12, color: "#24143099", textAlign: "center" }}>Page {page} of 8</p>
    </div>
  );
}