Preview Mode

Displays content as it will appear when published.

html

<div class="pmd" style="--accent:#E8A020;">
  <div class="pmd__frame pmd__frame--desktop" data-device="desktop">
    <div class="pmd__chrome">
      <span class="pmd__dot"></span><span class="pmd__dot"></span><span class="pmd__dot"></span>
      <span class="pmd__badge">Draft preview</span>
    </div>
    <div class="pmd__page">
      <h1 class="pmd__title">New pricing, simpler tiers</h1>
      <p class="pmd__body">We&#39;re consolidating five plans into three, effective next month.</p>
      <button type="button" class="pmd__cta" style="background:#E8A020;">Read more</button>
    </div>
  </div>
</div>
<style>
.pmd { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 24px; display: flex; justify-content: center; }
.pmd__frame { background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(36,20,48,.18); overflow: hidden; width: 360px; }
.pmd__frame--mobile { width: 220px; border-radius: 22px; border: 6px solid #241430; }
.pmd__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #24143008; border-bottom: 1px solid #24143014; }
.pmd__dot { width: 8px; height: 8px; border-radius: 50%; background: #24143026; }
.pmd__frame--mobile .pmd__dot { display: none; }
.pmd__badge { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.pmd__page { padding: 20px 18px; }
.pmd__title { margin: 0 0 8px; font-size: 20px; }
.pmd__frame--mobile .pmd__title { font-size: 16px; }
.pmd__body { margin: 0 0 14px; font-size: 14px; color: #241430cc; }
.pmd__cta { border: none; color: #241430; padding: 8px 16px; border-radius: 8px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
</style>

tailwind

<div class="flex justify-center bg-[#FAF7F2] text-[#241430] font-sans p-6" style="--accent:#E8A020;">
  <div class="pmt pmt--desktop bg-white rounded-2xl shadow-xl overflow-hidden w-[360px]" data-device="desktop">
    <div class="flex items-center gap-1.5 px-3 py-2.5 bg-[#24143008] border-b border-[#24143014]">
      <span class="pmt__dot w-2 h-2 rounded-full bg-[#24143026]"></span>
      <span class="pmt__dot w-2 h-2 rounded-full bg-[#24143026]"></span>
      <span class="pmt__dot w-2 h-2 rounded-full bg-[#24143026]"></span>
      <span class="ml-auto text-[11px] font-bold uppercase tracking-wide" style="color:#E8A020">Draft preview</span>
    </div>
    <div class="px-[18px] py-5">
      <h1 class="pmt__title m-0 mb-2 text-xl">New pricing, simpler tiers</h1>
      <p class="m-0 mb-3.5 text-sm text-[#241430]/80">We&#39;re consolidating five plans into three, effective next month.</p>
      <button type="button" class="border-0 text-[#241430] px-4 py-2 rounded-lg text-[13px] font-semibold cursor-pointer" style="background:#E8A020">Read more</button>
    </div>
  </div>
</div>
<style>
.pmt--mobile { width: 220px !important; border-radius: 22px; border: 6px solid #241430; }
.pmt--mobile .pmt__dot { display: none; }
.pmt--mobile .pmt__title { font-size: 16px; }
</style>

react

export function PreviewMode({
  pageTitle = "New pricing, simpler tiers",
  pageBody = "We're consolidating five plans into three, effective next month.",
  device = "desktop",
  accent = "#E8A020",
  isPublished = false,
}) {
  const mobile = device === "mobile";
  return (
    <div style={{ display: "flex", justifyContent: "center", fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 24 }}>
      <div style={{ background: "#fff", borderRadius: mobile ? 22 : 14, boxShadow: "0 14px 32px rgba(36,20,48,.18)", overflow: "hidden",
        width: mobile ? 220 : 360, border: mobile ? "6px solid #241430" : "none" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "10px 12px", background: "#24143008", borderBottom: "1px solid #24143014" }}>
          {!mobile && [0, 1, 2].map((i) => <span key={i} style={{ width: 8, height: 8, borderRadius: "50%", background: "#24143026" }} />)}
          <span style={{ marginLeft: "auto", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em", color: accent }}>
            {isPublished ? "Published" : "Draft preview"}
          </span>
        </div>
        <div style={{ padding: mobile ? "16px 14px" : "20px 18px" }}>
          <h1 style={{ margin: "0 0 8px", fontSize: mobile ? 16 : 20 }}>{pageTitle}</h1>
          <p style={{ margin: "0 0 14px", fontSize: 14, color: "#241430cc" }}>{pageBody}</p>
          <button type="button" style={{ border: "none", color: "#241430", background: accent, padding: "8px 16px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>Read more</button>
        </div>
      </div>
    </div>
  );
}