20 Tailwind CSS Popovers
06 / 20

All 20 in 20 Tailwind CSS Popovers

  1. 01Tailwind Popover Show and Hide with the Popover API
  2. 02Tailwind Auto vs Manual Popover Behavior
  3. 03Tailwind Anchored Popover with CSS Anchor Positioning
  4. 04Tailwind Popover Entry and Exit Animation
  5. 05Tailwind Popover Backdrop and Light Dismiss
  6. 06Tailwind Position Area Popover Placement Grid
  7. 07Tailwind Popover Flip with Position Try Fallbacks
  8. 08Tailwind Tooltip Arrow Pointing to Anchor
  9. 09Tailwind Dropdown Matching Anchor Width
  10. 10Tailwind Nested Popover Submenu
  11. 11Tailwind Custom Select Listbox Popover
  12. 12Tailwind Tooltip on Hover and Focus
  13. 13Tailwind User Profile Dropdown Menu
  14. 14Tailwind Date Picker Popover
  15. 15Tailwind Filter Dropdown with Checkboxes
  16. 16Tailwind Popover Fallback and Polyfill
  17. 17Tailwind Popover vs Dialog Modal
  18. 18Tailwind Glassmorphism Popover
  19. 19Tailwind Dark Mode Popover Toggle
  20. 20Tailwind Accessible Tooltip with ARIA
Pure TailwindMIT licensed

Tailwind Position Area Popover Placement Grid

position-area treats the space around an anchor as a 3×3 grid and lets you name a cell. This board makes it literal: eight buttons around one anchor, each opening a panel in its own cell — and in the port, each panel's placement is one arbitrary property you can read off the markup: [position-area:block-start_inline-start]. The panel also prints its physical equivalent, and the cell that opened it lights up while it's open.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tpop-06 transition-[--tpop06-d] duration-300 ease-in-out motion-reduce:transition-none dark:[--tpop06-d:1] [[data-theme=dark]_&]:[--tpop06-d:1] [[data-theme=light]_&]:[--tpop06-d:0] group/root w-full min-h-svh bg-tpop06-bg px-4 py-9 font-tpop06-sans text-tpop06-ink" aria-label="Position area placement grid demo">
  <div class="grid min-h-[calc(100svh-72px)] max-w-full place-items-center">
    <div class="w-full min-w-0 max-w-[30rem]">
      <p class="mb-3 font-tpop06-mono text-[11px] font-semibold uppercase tracking-[0.1em] text-tpop06-mut">position-area · nine cells, one anchor</p>
      <div class="grid grid-cols-3 gap-0.5 overflow-hidden rounded-lg border border-tpop06-rule bg-tpop06-rule">
        <button id="tpop-06-trigger" type="button" popovertarget="tpop-06-p1" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p1:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p1:popover-open]/root:text-tpop06-surface">block-start<br>inline-start</button>
        <button type="button" popovertarget="tpop-06-p2" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p2:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p2:popover-open]/root:text-tpop06-surface">block-start<br>center</button>
        <button type="button" popovertarget="tpop-06-p3" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p3:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p3:popover-open]/root:text-tpop06-surface">block-start<br>inline-end</button>
        <button type="button" popovertarget="tpop-06-p4" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p4:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p4:popover-open]/root:text-tpop06-surface">center<br>inline-start</button>
        <div class="grid min-h-16 place-items-center bg-tpop06-ink font-tpop06-mono text-[10.5px] font-bold tracking-[0.2em] text-tpop06-surface [anchor-name:--tpop06-a]">ANCHOR</div>
        <button type="button" popovertarget="tpop-06-p6" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p6:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p6:popover-open]/root:text-tpop06-surface">center<br>inline-end</button>
        <button type="button" popovertarget="tpop-06-p7" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p7:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p7:popover-open]/root:text-tpop06-surface">block-end<br>inline-start</button>
        <button type="button" popovertarget="tpop-06-p8" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p8:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p8:popover-open]/root:text-tpop06-surface">block-end<br>center</button>
        <button type="button" popovertarget="tpop-06-p9" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p9:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p9:popover-open]/root:text-tpop06-surface">block-end<br>inline-end</button>
      </div>
      <p class="mt-3.5 text-[13px] leading-relaxed text-tpop06-mut">Eight buttons, eight panels, one anchor. Every panel differs by a single arbitrary property.</p>
    </div>
  </div>

  <div popover="auto" id="tpop-06-p1" role="group" aria-label="block-start inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2 supports-[anchor-name:--a]:mb-2">block-start inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top left</span></div>
  <div popover="auto" id="tpop-06-p2" role="group" aria-label="block-start center" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_center] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mb-2">block-start center<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top</span></div>
  <div popover="auto" id="tpop-06-p3" role="group" aria-label="block-start inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2 supports-[anchor-name:--a]:mb-2">block-start inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top right</span></div>
  <div popover="auto" id="tpop-06-p4" role="group" aria-label="center inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:center_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2">center inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ left</span></div>
  <div popover="auto" id="tpop-06-p6" role="group" aria-label="center inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:center_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2">center inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ right</span></div>
  <div popover="auto" id="tpop-06-p7" role="group" aria-label="block-end inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2 supports-[anchor-name:--a]:mt-2">block-end inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom left</span></div>
  <div popover="auto" id="tpop-06-p8" role="group" aria-label="block-end center" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_center] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mt-2">block-end center<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom</span></div>
  <div popover="auto" id="tpop-06-p9" role="group" aria-label="block-end inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2 supports-[anchor-name:--a]:mt-2">block-end inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom right</span></div>
</section>
@import "tailwindcss";

@theme {
  --color-tpop06-bg: #f0f2f4;
  --color-tpop06-bg: oklch(0.96 0.004 260);
  --color-tpop06-surface: #ffffff;
  --color-tpop06-surface: oklch(1 0 0);
  --color-tpop06-ink: #171b22;
  --color-tpop06-ink: oklch(0.22 0.015 260);
  --color-tpop06-mut: #545b66;
  --color-tpop06-mut: oklch(0.47 0.02 260);
  --color-tpop06-rule: #d4d8dd;
  --color-tpop06-rule: oklch(0.88 0.008 260);
  --color-tpop06-acc: #325ac2;
  --color-tpop06-acc: oklch(0.5 0.17 265);
  --font-tpop06-sans: 'Geist', system-ui, sans-serif;
  --font-tpop06-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Theme dial: 0 = light, 1 = dark. Registered so the root can transition it. */

@property --tpop06-d {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles — plus the dark palette. Each @theme colour is
   re-declared on the root as a light/dark mix of the dial, so every utility (and every open
   popover, which inherits from the root) follows it. Light value last, dark value first. */

.tpop-06 {
  width: 100%;
  min-height: 100svh;
  --color-tpop06-bg: color-mix(in oklch, oklch(0.17 0.01 260) calc(var(--tpop06-d) * 100%), oklch(0.96 0.004 260));
  --color-tpop06-surface: color-mix(in oklch, oklch(0.215 0.012 260) calc(var(--tpop06-d) * 100%), oklch(1 0 0));
  --color-tpop06-ink: color-mix(in oklch, oklch(0.95 0.006 260) calc(var(--tpop06-d) * 100%), oklch(0.22 0.015 260));
  --color-tpop06-mut: color-mix(in oklch, oklch(0.73 0.02 260) calc(var(--tpop06-d) * 100%), oklch(0.47 0.02 260));
  --color-tpop06-rule: color-mix(in oklch, oklch(0.3 0.014 260) calc(var(--tpop06-d) * 100%), oklch(0.88 0.008 260));
  --color-tpop06-acc: color-mix(in oklch, oklch(0.7 0.14 265) calc(var(--tpop06-d) * 100%), oklch(0.5 0.17 265));
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tpop06-bg: #f0f2f4;
  --color-tpop06-bg: oklch(0.96 0.004 260);
  --color-tpop06-surface: #ffffff;
  --color-tpop06-surface: oklch(1 0 0);
  --color-tpop06-ink: #171b22;
  --color-tpop06-ink: oklch(0.22 0.015 260);
  --color-tpop06-mut: #545b66;
  --color-tpop06-mut: oklch(0.47 0.02 260);
  --color-tpop06-rule: #d4d8dd;
  --color-tpop06-rule: oklch(0.88 0.008 260);
  --color-tpop06-acc: #325ac2;
  --color-tpop06-acc: oklch(0.5 0.17 265);
  --font-tpop06-sans: 'Geist', system-ui, sans-serif;
  --font-tpop06-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Theme dial: 0 = light, 1 = dark. Registered so the root can transition it. */

@property --tpop06-d {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles — plus the dark palette. Each @theme colour is
   re-declared on the root as a light/dark mix of the dial, so every utility (and every open
   popover, which inherits from the root) follows it. Light value last, dark value first. */

.tpop-06 {
  width: 100%;
  min-height: 100svh;
  --color-tpop06-bg: color-mix(in oklch, oklch(0.17 0.01 260) calc(var(--tpop06-d) * 100%), oklch(0.96 0.004 260));
  --color-tpop06-surface: color-mix(in oklch, oklch(0.215 0.012 260) calc(var(--tpop06-d) * 100%), oklch(1 0 0));
  --color-tpop06-ink: color-mix(in oklch, oklch(0.95 0.006 260) calc(var(--tpop06-d) * 100%), oklch(0.22 0.015 260));
  --color-tpop06-mut: color-mix(in oklch, oklch(0.73 0.02 260) calc(var(--tpop06-d) * 100%), oklch(0.47 0.02 260));
  --color-tpop06-rule: color-mix(in oklch, oklch(0.3 0.014 260) calc(var(--tpop06-d) * 100%), oklch(0.88 0.008 260));
  --color-tpop06-acc: color-mix(in oklch, oklch(0.7 0.14 265) calc(var(--tpop06-d) * 100%), oklch(0.5 0.17 265));
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400..800&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Eight .pop-06__p--N modifier rules became one arbitrary property per panel — the placement you're studying is now in the markup of the element it places.
  • margin: 0 var(--gap) var(--gap) 0 became supports-[anchor-name:--a]:mr-2 mb-2, gated with the rest of the reset so unanchored engines keep a centred panel.
  • UI upgrade from the CSS original: the invoking cell fills with the accent while its panel is open (group-has-[#tpop-06-pN:popover-open]/root:), and each panel prints its physical equivalent (≈ top left) — the mapping the original only described.
  • UI upgrade: cell labels grew from 9.5px to 10.5px, cells to 64px tall, panels scale in from 95%, and the flat slate accent became an indigo that reads as interactive.
  • UI upgrade — dark mode: the stage now follows prefers-color-scheme (and a data-theme override on any ancestor) through one registered dial, --tpop06-d. The root rule re-declares each @theme colour as color-mix(dark calc(var(--tpop06-d)*100%), light), the root sets the dial with dark:[--tpop06-d:1], and transition-[--tpop06-d] crossfades page and open popovers together — the markup's colour utilities are unchanged.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Position Area Popover Placement Grid
Source: https://codefronts.com/snippets/tailwind-css-popovers/tailwind-position-area-popover-placement-grid/

position-area treats the space around an anchor as a 3×3 grid and lets you name a cell. This board makes it literal: eight buttons around one anchor, each opening a panel in its own cell — and in the port, each panel's placement is one arbitrary property you can read off the markup: [position-area:block-start_inline-start]. The panel also prints its physical equivalent, and the cell that opened it lights up while it's open.
## HTML
```html
<section class="tpop-06 transition-[--tpop06-d] duration-300 ease-in-out motion-reduce:transition-none dark:[--tpop06-d:1] [[data-theme=dark]_&]:[--tpop06-d:1] [[data-theme=light]_&]:[--tpop06-d:0] group/root w-full min-h-svh bg-tpop06-bg px-4 py-9 font-tpop06-sans text-tpop06-ink" aria-label="Position area placement grid demo">
  <div class="grid min-h-[calc(100svh-72px)] max-w-full place-items-center">
    <div class="w-full min-w-0 max-w-[30rem]">
      <p class="mb-3 font-tpop06-mono text-[11px] font-semibold uppercase tracking-[0.1em] text-tpop06-mut">position-area · nine cells, one anchor</p>
      <div class="grid grid-cols-3 gap-0.5 overflow-hidden rounded-lg border border-tpop06-rule bg-tpop06-rule">
        <button id="tpop-06-trigger" type="button" popovertarget="tpop-06-p1" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p1:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p1:popover-open]/root:text-tpop06-surface">block-start<br>inline-start</button>
        <button type="button" popovertarget="tpop-06-p2" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p2:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p2:popover-open]/root:text-tpop06-surface">block-start<br>center</button>
        <button type="button" popovertarget="tpop-06-p3" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p3:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p3:popover-open]/root:text-tpop06-surface">block-start<br>inline-end</button>
        <button type="button" popovertarget="tpop-06-p4" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p4:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p4:popover-open]/root:text-tpop06-surface">center<br>inline-start</button>
        <div class="grid min-h-16 place-items-center bg-tpop06-ink font-tpop06-mono text-[10.5px] font-bold tracking-[0.2em] text-tpop06-surface [anchor-name:--tpop06-a]">ANCHOR</div>
        <button type="button" popovertarget="tpop-06-p6" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p6:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p6:popover-open]/root:text-tpop06-surface">center<br>inline-end</button>
        <button type="button" popovertarget="tpop-06-p7" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p7:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p7:popover-open]/root:text-tpop06-surface">block-end<br>inline-start</button>
        <button type="button" popovertarget="tpop-06-p8" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p8:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p8:popover-open]/root:text-tpop06-surface">block-end<br>center</button>
        <button type="button" popovertarget="tpop-06-p9" class="min-h-16 min-w-0 cursor-pointer bg-tpop06-surface px-1 py-1.5 font-tpop06-mono text-[10.5px] font-semibold leading-snug text-tpop06-mut transition-colors hover:bg-tpop06-acc/8 hover:text-tpop06-ink focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-tpop06-acc group-has-[#tpop-06-p9:popover-open]/root:bg-tpop06-acc group-has-[#tpop-06-p9:popover-open]/root:text-tpop06-surface">block-end<br>inline-end</button>
      </div>
      <p class="mt-3.5 text-[13px] leading-relaxed text-tpop06-mut">Eight buttons, eight panels, one anchor. Every panel differs by a single arbitrary property.</p>
    </div>
  </div>

  <div popover="auto" id="tpop-06-p1" role="group" aria-label="block-start inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2 supports-[anchor-name:--a]:mb-2">block-start inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top left</span></div>
  <div popover="auto" id="tpop-06-p2" role="group" aria-label="block-start center" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_center] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mb-2">block-start center<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top</span></div>
  <div popover="auto" id="tpop-06-p3" role="group" aria-label="block-start inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-start_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2 supports-[anchor-name:--a]:mb-2">block-start inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ top right</span></div>
  <div popover="auto" id="tpop-06-p4" role="group" aria-label="center inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:center_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2">center inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ left</span></div>
  <div popover="auto" id="tpop-06-p6" role="group" aria-label="center inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:center_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2">center inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ right</span></div>
  <div popover="auto" id="tpop-06-p7" role="group" aria-label="block-end inline-start" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_inline-start] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mr-2 supports-[anchor-name:--a]:mt-2">block-end inline-start<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom left</span></div>
  <div popover="auto" id="tpop-06-p8" role="group" aria-label="block-end center" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_center] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mt-2">block-end center<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom</span></div>
  <div popover="auto" id="tpop-06-p9" role="group" aria-label="block-end inline-end" class="fixed m-auto w-max max-w-[min(14rem,calc(100vw-24px))] rounded-md bg-tpop06-ink px-3 py-2.5 font-tpop06-mono text-[11.5px] font-semibold leading-snug text-tpop06-surface opacity-0 shadow-[0_12px_28px_-14px_oklch(0.2_0.02_260/0.7)] transition-[opacity,scale,display,overlay] duration-150 transition-discrete [position-anchor:--tpop06-a] [position-area:block-end_inline-end] open:opacity-100 starting:open:scale-95 starting:open:opacity-0 motion-reduce:transition-none supports-[anchor-name:--a]:inset-auto supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:ml-2 supports-[anchor-name:--a]:mt-2">block-end inline-end<span class="block pt-1 font-normal text-tpop06-surface/70">≈ bottom right</span></div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tpop06-bg: #f0f2f4;
  --color-tpop06-bg: oklch(0.96 0.004 260);
  --color-tpop06-surface: #ffffff;
  --color-tpop06-surface: oklch(1 0 0);
  --color-tpop06-ink: #171b22;
  --color-tpop06-ink: oklch(0.22 0.015 260);
  --color-tpop06-mut: #545b66;
  --color-tpop06-mut: oklch(0.47 0.02 260);
  --color-tpop06-rule: #d4d8dd;
  --color-tpop06-rule: oklch(0.88 0.008 260);
  --color-tpop06-acc: #325ac2;
  --color-tpop06-acc: oklch(0.5 0.17 265);
  --font-tpop06-sans: 'Geist', system-ui, sans-serif;
  --font-tpop06-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* Theme dial: 0 = light, 1 = dark. Registered so the root can transition it. */

@property --tpop06-d {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles — plus the dark palette. Each @theme colour is
   re-declared on the root as a light/dark mix of the dial, so every utility (and every open
   popover, which inherits from the root) follows it. Light value last, dark value first. */

.tpop-06 {
  width: 100%;
  min-height: 100svh;
  --color-tpop06-bg: color-mix(in oklch, oklch(0.17 0.01 260) calc(var(--tpop06-d) * 100%), oklch(0.96 0.004 260));
  --color-tpop06-surface: color-mix(in oklch, oklch(0.215 0.012 260) calc(var(--tpop06-d) * 100%), oklch(1 0 0));
  --color-tpop06-ink: color-mix(in oklch, oklch(0.95 0.006 260) calc(var(--tpop06-d) * 100%), oklch(0.22 0.015 260));
  --color-tpop06-mut: color-mix(in oklch, oklch(0.73 0.02 260) calc(var(--tpop06-d) * 100%), oklch(0.47 0.02 260));
  --color-tpop06-rule: color-mix(in oklch, oklch(0.3 0.014 260) calc(var(--tpop06-d) * 100%), oklch(0.88 0.008 260));
  --color-tpop06-acc: color-mix(in oklch, oklch(0.7 0.14 265) calc(var(--tpop06-d) * 100%), oklch(0.5 0.17 265));
}
```

How this works

Two axis words, one property, no measurement. block-start inline-start is the corner above-and-before; block-end center is directly below. In Tailwind the space between the words becomes an underscore:

<div popover class="[position-anchor:--tpop06-a]
  [position-area:block-start_inline-start]
  supports-[anchor-name:--a]:mr-2
  supports-[anchor-name:--a]:mb-2">

Corners align opposite corners. In a corner cell the panel's far corner meets the anchor's near corner. Add a span- prefix — block-end_span-inline-end — and the panel may cover the centre column too, which is what a start-aligned dropdown wants.

Pick one coordinate system. top_left and block-start_inline-start agree in left-to-right horizontal text and diverge in RTL or vertical writing modes. The panels here print both so the mapping stops being abstract.

Make it yours

  • Try a span: change any panel to [position-area:block-end_span-inline-end] and watch it extend under the anchor.
  • Cover the anchor: [position-area:center] is useful for inline editing.
  • Change the gap globally: replace the -2 margins with -3 (12px).

Gotchas — read before shipping

  • Bare corners look wrong for dropdowns; you usually want the span- variant.
  • Forgetting inset-auto keeps the UA's inset: 0 and every cell renders identically.
  • A transformed ancestor becomes the containing block and moves the grid — the top layer avoids this, which is why the panels are popovers.

Browser support

ChromeSafariFirefoxEdge
125+26+131+125+

Pure anchor positioning: Chrome 125 / Safari 26 / Firefox 131. With popover but no anchoring, every panel still opens centred, and the printed label tells you where it would have gone.

Techniques used in this demo

Utilitiesfirst-class utility or variant

:has()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →