Permission Prompt

Request for user permission.

html

<div class="perm" style="--accent:#BFD9F2;">
  <span class="perm__icon"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
  <p class="perm__ask">Allow <strong>Acme Calendar</strong> to access your location?</p>
  <label class="perm__remember"><input type="checkbox" />Remember my choice</label>
  <div class="perm__actions">
    <button type="button" class="perm__deny">Block</button>
    <button type="button" class="perm__allow">Allow</button>
  </div>
</div>
<style>
.perm { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 18px; border-radius: 12px; box-sizing: border-box; border: 1px solid #24143018; box-shadow: 0 10px 24px rgba(36,20,48,.14); }
.perm__icon { color: var(--accent); display: inline-flex; margin-bottom: 8px; }
.perm__ask { margin: 0 0 12px; }
.perm__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 14px; color: #24143099; }
.perm__actions { display: flex; gap: 10px; }
.perm__deny, .perm__allow { flex: 1; padding: 9px; border-radius: 8px; font-weight: 700; cursor: pointer; font: inherit; }
.perm__deny { background: transparent; border: 1.5px solid #24143030; color: #241430; }
.perm__allow { background: var(--accent); border: none; color: #14351f; }
.perm__deny:focus-visible, .perm__allow:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-[18px] rounded-xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_10px_24px_rgba(36,20,48,.14)]">
  <span class="inline-flex mb-2" style="color:#BFD9F2"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
  <p class="m-0 mb-3">Allow <strong>Acme Calendar</strong> to access your location?</p>
  <label class="flex items-center gap-2 text-[13px] mb-3.5 text-[#241430]/60"><input type="checkbox" />Remember my choice</label>
  <div class="flex gap-2.5">
    <button type="button" class="flex-1 py-2.5 rounded-lg font-bold cursor-pointer bg-transparent border-[1.5px] border-[#24143030] text-[#241430]">Block</button>
    <button type="button" class="flex-1 py-2.5 rounded-lg font-bold cursor-pointer border-none text-[#14351f]" style="background:#BFD9F2">Allow</button>
  </div>
</div>

react

export function PermissionPrompt({
  appName = "Acme Calendar",
  permission = "location",
  rememberChoice = true,
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: 18, borderRadius: 12, boxSizing: "border-box", border: "1px solid #24143018", boxShadow: "0 10px 24px rgba(36,20,48,.14)" }}>
      <span style={{ display: "inline-flex", color: accent, marginBottom: 8 }}>
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /></svg>
      </span>
      <p style={{ margin: "0 0 12px" }}>Allow <strong>{appName}</strong> to access your {permission}?</p>
      {rememberChoice && <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, marginBottom: 14, color: "#24143099" }}><input type="checkbox" />Remember my choice</label>}
      <div style={{ display: "flex", gap: 10 }}>
        <button type="button" style={{ flex: 1, padding: 9, borderRadius: 8, fontWeight: 700, cursor: "pointer", font: "inherit", background: "transparent", border: "1.5px solid #24143030", color: "#241430" }}>Block</button>
        <button type="button" style={{ flex: 1, padding: 9, borderRadius: 8, fontWeight: 700, cursor: "pointer", font: "inherit", background: accent, border: "none", color: "#14351f" }}>Allow</button>
      </div>
    </div>
  );
}