PDF Viewer

Displays PDF documents.

html

<div class="pdfv">
  <div class="pdfv__toolbar" style="background:#241430;">
    <span class="pdfv__title">contract-final.pdf</span>
    <span class="pdfv__zoom">100%</span>
  </div>
  <div class="pdfv__body">
    
    <div class="pdfv__page" data-zoom="100%">
      <span class="pdfv__line"></span><span class="pdfv__line"></span><span class="pdfv__line pdfv__line--short"></span>
    </div>
  </div>
  <p class="pdfv__status">Page 2 of 8</p>
</div>
<style>
.pdfv { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 340px; border-radius: 10px; overflow: hidden; box-sizing: border-box; border: 1px solid #24143018; }
.pdfv__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-weight: 700; color: #FAF7F2; }
.pdfv__body { display: flex; background: #24143008; }
.pdfv__rail { flex: none; width: 40px; padding: 10px 6px; display: flex; flex-direction: column; gap: 6px; }
.pdfv__thumb { display: block; height: 24px; background: #24143022; border-radius: 3px; }
.pdfv__page { flex: 1 1 auto; padding: 20px 18px; min-height: 90px; }
.pdfv__page[data-zoom="150%"] { padding: 30px 18px; }
.pdfv__line { display: block; height: 8px; background: #24143022; border-radius: 4px; margin-bottom: 8px; }
.pdfv__line--short { width: 60%; }
.pdfv__status { margin: 0; padding: 8px 12px; font-size: 12px; color: #24143099; text-align: center; }
</style>

tailwind

<div class="w-[340px] rounded-[10px] overflow-hidden box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] pdfv-tw">
  <div class="flex items-center justify-between px-3 py-2 font-bold text-[#FAF7F2]" style="background:#241430">
    <span>contract-final.pdf</span>
    <span>100%</span>
  </div>
  <div class="flex bg-[#24143008]">
    
    <div class="flex-1 px-[18px] py-5 min-h-[90px] pdfv-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>
  </div>
  <p class="m-0 px-3 py-2 text-xs text-[#241430]/60 text-center">Page 2 of 8</p>
</div>
<style>
.pdfv-tw-page[data-zoom="150%"] { padding-top: 30px; padding-bottom: 30px; }
</style>

react

export function PdfViewer({
  title = "contract-final.pdf",
  page = "2",
  zoom = "100%",
  showThumbnails = false,
  accent = "#241430",
}) {
  const pagePad = zoom === "150%" ? "30px 18px" : "20px 18px";
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 340, 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: "#FAF7F2", background: accent }}>
        <span>{title}</span>
        <span>{zoom}</span>
      </div>
      <div style={{ display: "flex", background: "#24143008" }}>
        {showThumbnails && (
          <div style={{ flex: "none", width: 40, padding: "10px 6px", display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ display: "block", height: 24, background: "#24143022", borderRadius: 3 }} />
            <span style={{ display: "block", height: 24, background: "#24143022", borderRadius: 3 }} />
            <span style={{ display: "block", height: 24, background: "#24143022", borderRadius: 3 }} />
          </div>
        )}
        <div style={{ flex: "1 1 auto", 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>
      </div>
      <p style={{ margin: 0, padding: "8px 12px", fontSize: 12, color: "#24143099", textAlign: "center" }}>Page {page} of 8</p>
    </div>
  );
}