Safe Area

Screen area avoiding device notches/system UI.

html

<div class="rsp-sa-frame" data-device="notch">
  <div class="rsp-sa-cutout rsp-sa-cutout--notch"></div>
  <div class="rsp-sa-cutout rsp-sa-cutout--pill"></div>
  <div class="rsp-sa-content rsp-sa-content--safe" style="background:#BFD9F2;">Account settings</div>
  <p class="rsp-sa-caption">Padded clear of the notch</p>
</div>
<style>
.rsp-sa-frame { position: relative; width: 160px; height: 200px; margin: 0 auto; background: #241430; border-radius: 24px; padding: 10px; box-sizing: border-box; font: 10px system-ui, sans-serif; color: #241430aa; }
.rsp-sa-cutout { display: none; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #000; z-index: 2; }
.rsp-sa-cutout--notch { width: 60px; height: 16px; border-radius: 0 0 10px 10px; }
.rsp-sa-cutout--pill { width: 40px; height: 10px; border-radius: 999px; }
[data-device="notch"] .rsp-sa-cutout--notch,
[data-device="pill"] .rsp-sa-cutout--pill { display: block; }
.rsp-sa-content { margin-top: 10px; padding: 10px; border-radius: 8px; color: #241430; font-weight: 600; text-align: center; }
.rsp-sa-content--safe { margin-top: 34px; }
.rsp-sa-caption { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; color: #241430aa; }
</style>

tailwind

<div class="relative w-40 h-[200px] mx-auto bg-[#241430] rounded-3xl p-2.5 box-border font-sans text-[10px] text-[#241430]/70" data-device="notch">
  <div class="tw-sa-notch hidden absolute top-2.5 left-1/2 -translate-x-1/2 bg-black z-10 w-[60px] h-4 rounded-b-[10px]"></div>
  <div class="tw-sa-pill hidden absolute top-2.5 left-1/2 -translate-x-1/2 bg-black z-10 w-10 h-2.5 rounded-full"></div>
  <div class="tw-sa-content tw-sa-safe mt-2.5 p-2.5 rounded-lg text-[#241430] font-semibold text-center" style="background:#BFD9F2;">Account settings</div>
  <p class="absolute -bottom-[30px] left-0 right-0 text-center">Padded clear of the notch</p>
</div>
<style>
[data-device="notch"] .tw-sa-notch,
[data-device="pill"] .tw-sa-pill { display: block; }
.tw-sa-safe { margin-top: 34px !important; }
</style>

react

export function SafeArea({
  respectSafeArea = true,
  device = "notch",
  content = "Account settings",
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ position: "relative", width: 160, height: 200, margin: "0 auto", background: "#241430", borderRadius: 24, padding: 10, boxSizing: "border-box", fontFamily: "system-ui, sans-serif", fontSize: 10, color: "#241430aa" }}>
      <div style={{ position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)", background: "#000", zIndex: 2, width: device === "notch" ? 60 : 40, height: device === "notch" ? 16 : 10, borderRadius: device === "notch" ? "0 0 10px 10px" : 999 }} />
      <div style={{ marginTop: respectSafeArea ? 34 : 10, padding: 10, borderRadius: 8, color: "#241430", fontWeight: 600, textAlign: "center", background: accent }}>{content}</div>
      <p style={{ position: "absolute", bottom: -30, left: 0, right: 0, textAlign: "center" }}>
        {respectSafeArea ? `Padded clear of the ${device}` : `Ignoring the safe area \u2014 text sits under the ${device}`}
      </p>
    </div>
  );
}