Screen

A complete application view, especially in mobile/software terminology.

html

<div class="uif-scr-frame">
  <div class="uif-scr-status">9:41</div>
  <div class="uif-scr-nav" style="background:#241430;">Inbox</div>
  <div class="uif-scr-body" data-screen="list">
    <div class="uif-scr-row uif-scr-row--list"></div>
    <div class="uif-scr-row uif-scr-row--list"></div>
    <div class="uif-scr-row uif-scr-row--list"></div>
    <div class="uif-scr-row uif-scr-row--detail" style="height:60px;"></div>
    <div class="uif-scr-row uif-scr-row--detail" style="height:14px; width:60%;"></div>
    <div class="uif-scr-row uif-scr-row--detail" style="height:60px; margin-top:10px;"></div>
  </div>
</div>
<style>
.uif-scr-frame { width: 160px; margin: 0 auto; background: #FAF7F2; border: 6px solid #241430; border-radius: 20px; overflow: hidden; font: 10px system-ui, sans-serif; color: #241430aa; }
.uif-scr-status { text-align: right; padding: 4px 8px; font-size: 9px; }
.uif-scr-nav { padding: 8px; color: #fff; font-weight: 700; text-align: center; }
.uif-scr-body { padding: 8px; min-height: 130px; }
.uif-scr-row { display: none; background: #24143014; border-radius: 6px; margin-bottom: 6px; }
.uif-scr-row--list { height: 22px; }
[data-screen="list"] .uif-scr-row--list { display: block; }
[data-screen="detail"] .uif-scr-row--detail { display: block; }
</style>

tailwind

<div class="w-40 mx-auto bg-[#FAF7F2] border-[6px] border-[#241430] rounded-[20px] overflow-hidden font-sans text-[10px] text-[#241430]/70">
  <div class="text-right px-2 py-1 text-[9px]">9:41</div>
  <div class="p-2 text-white font-bold text-center" style="background:#241430;">Inbox</div>
  <div class="p-2 min-h-[130px]" data-screen="list">
    <div class="tw-scr-list hidden h-[22px] bg-[#24143014] rounded-md mb-1.5"></div>
    <div class="tw-scr-list hidden h-[22px] bg-[#24143014] rounded-md mb-1.5"></div>
    <div class="tw-scr-list hidden h-[22px] bg-[#24143014] rounded-md mb-1.5"></div>
    <div class="tw-scr-detail hidden bg-[#24143014] rounded-md mb-1.5" style="height:60px;"></div>
    <div class="tw-scr-detail hidden bg-[#24143014] rounded-md mb-1.5" style="height:14px; width:60%;"></div>
    <div class="tw-scr-detail hidden bg-[#24143014] rounded-md" style="height:60px; margin-top:10px;"></div>
  </div>
</div>
<style>
[data-screen="list"] .tw-scr-list { display: block; }
[data-screen="detail"] .tw-scr-detail { display: block; }
</style>

react

export function Screen({
  screenType = "list",
  title = "Inbox",
  showStatusBar = true,
  accent = "#241430",
}) {
  const row = { background: "#24143014", borderRadius: 6, marginBottom: 6 };
  return (
    <div style={{ width: 160, margin: "0 auto", background: "#FAF7F2", border: "6px solid #241430", borderRadius: 20, overflow: "hidden", fontFamily: "system-ui, sans-serif", fontSize: 10, color: "#241430aa" }}>
      {showStatusBar && <div style={{ textAlign: "right", padding: "4px 8px", fontSize: 9 }}>9:41</div>}
      <div style={{ padding: 8, color: "#fff", fontWeight: 700, textAlign: "center", background: accent }}>{title}</div>
      <div style={{ padding: 8, minHeight: 130 }}>
        {screenType === "list" ? (
          <>
            <div style={{ ...row, height: 22 }} />
            <div style={{ ...row, height: 22 }} />
            <div style={{ ...row, height: 22 }} />
          </>
        ) : (
          <>
            <div style={{ ...row, height: 60 }} />
            <div style={{ ...row, height: 14, width: "60%" }} />
            <div style={{ ...row, height: 60, marginTop: 10 }} />
          </>
        )}
      </div>
    </div>
  );
}