30 / 36

Tailwind + JSMIT licensed

Tailwind Newsletter Signup Modal with Depth-Layer Parallax Entrance

An editorial subscribe card that arrives in layers — a red disc drifting up behind, the card settling a beat later, the backdrop blurring first. The port expresses the depth as two elements with different [transition-delay:…] and different curves, all read from the dialog's [open] state.

Live DemoSep 19, 2026

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="tw-12 w-full min-h-svh grid place-items-center bg-tw12-bg font-tw12-sans px-6 py-10">
  <button type="button" data-tw12-open class="inline-flex items-center justify-center min-h-11 px-6 rounded-md border border-tw12-ink bg-tw12-ink text-[15px] font-semibold text-tw12-card cursor-pointer transition-colors duration-200 hover:bg-black focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">Get the newsletter</button>

  <dialog id="tw-12-dlg" aria-labelledby="tw-12-title" class="m-auto w-[min(460px,94vw)] p-0 border-0 bg-transparent overflow-visible open:backdrop:bg-tw12-scrim open:backdrop:backdrop-blur-[6px]">
    <div class="relative">
      <span aria-hidden="true" class="absolute -top-10 -right-10 size-[150px] rounded-full bg-tw12-accent opacity-0 translate-y-[60px] scale-90 transition-[opacity,translate,scale] duration-500 ease-out [transition-delay:100ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 in-[dialog[open]]:scale-100 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:scale-100 motion-reduce:[transition-delay:0ms]"></span>

      <div class="relative px-8 pt-[34px] pb-7 rounded-[14px] overflow-hidden bg-tw12-card text-left text-tw12-ink shadow-[0_40px_60px_-20px_#1a1a1a66] opacity-0 translate-y-[30px] transition-[opacity,translate] duration-[450ms] ease-[cubic-bezier(.22,1,.36,1)] [transition-delay:200ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:[transition-delay:0ms]">
        <button type="button" data-tw12-close aria-label="Close dialog" class="absolute top-3.5 right-3.5 z-10 grid place-items-center size-9 rounded-md border-0 bg-transparent text-[15px] text-tw12-sub cursor-pointer transition-colors duration-200 hover:bg-tw12-hover hover:text-tw12-ink focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">&#10005;</button>

        <p class="mb-2.5 text-xs font-bold uppercase tracking-[0.14em] text-tw12-accent">The Weekly Dispatch</p>
        <h2 id="tw-12-title" class="mb-2.5 font-tw12-display text-[1.7rem] font-extrabold tracking-[-0.02em] leading-tight text-balance">Ideas worth 4 minutes of your Sunday.</h2>
        <p class="mb-5 text-sm leading-relaxed text-tw12-sub text-pretty">One long-form essay on design, code, and craft. Sent Sunday. 12,400+ readers.</p>

        <form method="dialog" class="flex gap-2 mb-3 max-[400px]:flex-col">
          <label class="flex-1 block">
            <span class="sr-only">Email address</span>
            <input type="email" autofocus required autocomplete="email" placeholder="you@work.com" class="w-full min-h-11 px-3.5 rounded-lg border border-tw12-line bg-white text-[15px] text-tw12-ink placeholder:text-tw12-sub transition-[border-color,box-shadow] duration-200 focus:outline-none focus:border-tw12-ink focus:shadow-[0_0_0_3px_var(--color-tw12-ring)]">
          </label>
          <button type="submit" class="min-h-11 px-5 rounded-lg border-0 bg-tw12-ink text-[15px] font-bold text-tw12-card whitespace-nowrap cursor-pointer transition-[background-color,translate] duration-200 hover:bg-black hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-[3px] motion-reduce:hover:translate-y-0">Subscribe &rarr;</button>
        </form>

        <p class="text-center text-xs text-tw12-sub">1-click unsubscribe · No spam, ever · GDPR-compliant</p>
      </div>
    </div>
  </dialog>
</section>

<section class="tw-12 w-full min-h-svh grid place-items-center bg-tw12-bg font-tw12-sans px-6 py-10">
  <button type="button" data-tw12-open class="inline-flex items-center justify-center min-h-11 px-6 rounded-md border border-tw12-ink bg-tw12-ink text-[15px] font-semibold text-tw12-card cursor-pointer transition-colors duration-200 hover:bg-black focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">Get the newsletter</button>

  <dialog id="tw-12-dlg" aria-labelledby="tw-12-title" class="m-auto w-[min(460px,94vw)] p-0 border-0 bg-transparent overflow-visible open:backdrop:bg-tw12-scrim open:backdrop:backdrop-blur-[6px]">
    <div class="relative">
      <span aria-hidden="true" class="absolute -top-10 -right-10 size-[150px] rounded-full bg-tw12-accent opacity-0 translate-y-[60px] scale-90 transition-[opacity,translate,scale] duration-500 ease-out [transition-delay:100ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 in-[dialog[open]]:scale-100 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:scale-100 motion-reduce:[transition-delay:0ms]"></span>

      <div class="relative px-8 pt-[34px] pb-7 rounded-[14px] overflow-hidden bg-tw12-card text-left text-tw12-ink shadow-[0_40px_60px_-20px_#1a1a1a66] opacity-0 translate-y-[30px] transition-[opacity,translate] duration-[450ms] ease-[cubic-bezier(.22,1,.36,1)] [transition-delay:200ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:[transition-delay:0ms]">
        <button type="button" data-tw12-close aria-label="Close dialog" class="absolute top-3.5 right-3.5 z-10 grid place-items-center size-9 rounded-md border-0 bg-transparent text-[15px] text-tw12-sub cursor-pointer transition-colors duration-200 hover:bg-tw12-hover hover:text-tw12-ink focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">&#10005;</button>

        <p class="mb-2.5 text-xs font-bold uppercase tracking-[0.14em] text-tw12-accent">The Weekly Dispatch</p>
        <h2 id="tw-12-title" class="mb-2.5 font-tw12-display text-[1.7rem] font-extrabold tracking-[-0.02em] leading-tight text-balance">Ideas worth 4 minutes of your Sunday.</h2>
        <p class="mb-5 text-sm leading-relaxed text-tw12-sub text-pretty">One long-form essay on design, code, and craft. Sent Sunday. 12,400+ readers.</p>

        <form method="dialog" class="flex gap-2 mb-3 max-[400px]:flex-col">
          <label class="flex-1 block">
            <span class="sr-only">Email address</span>
            <input type="email" autofocus required autocomplete="email" placeholder="you@work.com" class="w-full min-h-11 px-3.5 rounded-lg border border-tw12-line bg-white text-[15px] text-tw12-ink placeholder:text-tw12-sub transition-[border-color,box-shadow] duration-200 focus:outline-none focus:border-tw12-ink focus:shadow-[0_0_0_3px_var(--color-tw12-ring)]">
          </label>
          <button type="submit" class="min-h-11 px-5 rounded-lg border-0 bg-tw12-ink text-[15px] font-bold text-tw12-card whitespace-nowrap cursor-pointer transition-[background-color,translate] duration-200 hover:bg-black hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-[3px] motion-reduce:hover:translate-y-0">Subscribe &rarr;</button>
        </form>

        <p class="text-center text-xs text-tw12-sub">1-click unsubscribe · No spam, ever · GDPR-compliant</p>
      </div>
    </div>
  </dialog>
</section>

@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}

@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}

(function () {
  var root = document.querySelector('.tw-12');
  var dlg = root.querySelector('#tw-12-dlg');
  var stage = dlg.firstElementChild;
  // Production: replace this click trigger with scroll depth, dwell time or exit intent.
  root.querySelector('[data-tw12-open]').addEventListener('click', function () { dlg.showModal(); });
  root.querySelector('[data-tw12-close]').addEventListener('click', function () { dlg.close(); });
  dlg.addEventListener('click', function (e) {
    var r = stage.getBoundingClientRect();
    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dlg.close();
  });
})();

(function () {
  var root = document.querySelector('.tw-12');
  var dlg = root.querySelector('#tw-12-dlg');
  var stage = dlg.firstElementChild;
  // Production: replace this click trigger with scroll depth, dwell time or exit intent.
  root.querySelector('[data-tw12-open]').addEventListener('click', function () { dlg.showModal(); });
  root.querySelector('[data-tw12-close]').addEventListener('click', function () { dlg.close(); });
  dlg.addEventListener('click', function (e) {
    var r = stage.getBoundingClientRect();
    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dlg.close();
  });
})();

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>

<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.

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

// vite.config.js  ("type": "module" in package.json)
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist

@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}

@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}

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=Outfit:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap">

<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=Outfit:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap">

What changed in the port

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

Parallax needs no library and no 3D: two elements, two delays, two curves, both reading the same [open] state.
The dialog is bg-transparent overflow-visible so the decorative disc can sit outside the card's rounded box — a dialog with a background would clip it.
The original's .sr-only helper class is gone; v4 ships sr-only as a utility, so the visually hidden label needs no bespoke CSS.
The editorial red was darkened from #e63946 so the eyebrow text clears 4.5:1 on cream.
UI change from the CSS original: the field and button are 44px, the form stacks rather than squeezes under 400px, and the headline uses text-balance so it breaks evenly at every width.

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 Newsletter Signup Modal with Depth-Layer Parallax Entrance
Source: https://codefronts.com/components/tailwind-css-modals/tailwind-newsletter-signup-modal-depth-layer-parallax/

An editorial subscribe card that arrives in layers — a red disc drifting up behind, the card settling a beat later, the backdrop blurring first. The port expresses the depth as two elements with different [transition-delay:…] and different curves, all read from the dialog's [open] state.
## HTML
```html
<section class="tw-12 w-full min-h-svh grid place-items-center bg-tw12-bg font-tw12-sans px-6 py-10">
  <button type="button" data-tw12-open class="inline-flex items-center justify-center min-h-11 px-6 rounded-md border border-tw12-ink bg-tw12-ink text-[15px] font-semibold text-tw12-card cursor-pointer transition-colors duration-200 hover:bg-black focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">Get the newsletter</button>

  <dialog id="tw-12-dlg" aria-labelledby="tw-12-title" class="m-auto w-[min(460px,94vw)] p-0 border-0 bg-transparent overflow-visible open:backdrop:bg-tw12-scrim open:backdrop:backdrop-blur-[6px]">
    <div class="relative">
      <span aria-hidden="true" class="absolute -top-10 -right-10 size-[150px] rounded-full bg-tw12-accent opacity-0 translate-y-[60px] scale-90 transition-[opacity,translate,scale] duration-500 ease-out [transition-delay:100ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 in-[dialog[open]]:scale-100 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:scale-100 motion-reduce:[transition-delay:0ms]"></span>

      <div class="relative px-8 pt-[34px] pb-7 rounded-[14px] overflow-hidden bg-tw12-card text-left text-tw12-ink shadow-[0_40px_60px_-20px_#1a1a1a66] opacity-0 translate-y-[30px] transition-[opacity,translate] duration-[450ms] ease-[cubic-bezier(.22,1,.36,1)] [transition-delay:200ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:[transition-delay:0ms]">
        <button type="button" data-tw12-close aria-label="Close dialog" class="absolute top-3.5 right-3.5 z-10 grid place-items-center size-9 rounded-md border-0 bg-transparent text-[15px] text-tw12-sub cursor-pointer transition-colors duration-200 hover:bg-tw12-hover hover:text-tw12-ink focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">&#10005;</button>

        <p class="mb-2.5 text-xs font-bold uppercase tracking-[0.14em] text-tw12-accent">The Weekly Dispatch</p>
        <h2 id="tw-12-title" class="mb-2.5 font-tw12-display text-[1.7rem] font-extrabold tracking-[-0.02em] leading-tight text-balance">Ideas worth 4 minutes of your Sunday.</h2>
        <p class="mb-5 text-sm leading-relaxed text-tw12-sub text-pretty">One long-form essay on design, code, and craft. Sent Sunday. 12,400+ readers.</p>

        <form method="dialog" class="flex gap-2 mb-3 max-[400px]:flex-col">
          <label class="flex-1 block">
            <span class="sr-only">Email address</span>
            <input type="email" autofocus required autocomplete="email" placeholder="you@work.com" class="w-full min-h-11 px-3.5 rounded-lg border border-tw12-line bg-white text-[15px] text-tw12-ink placeholder:text-tw12-sub transition-[border-color,box-shadow] duration-200 focus:outline-none focus:border-tw12-ink focus:shadow-[0_0_0_3px_var(--color-tw12-ring)]">
          </label>
          <button type="submit" class="min-h-11 px-5 rounded-lg border-0 bg-tw12-ink text-[15px] font-bold text-tw12-card whitespace-nowrap cursor-pointer transition-[background-color,translate] duration-200 hover:bg-black hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-[3px] motion-reduce:hover:translate-y-0">Subscribe &rarr;</button>
        </form>

        <p class="text-center text-xs text-tw12-sub">1-click unsubscribe · No spam, ever · GDPR-compliant</p>
      </div>
    </div>
  </dialog>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}
```

## JavaScript
```js
(function () {
  var root = document.querySelector('.tw-12');
  var dlg = root.querySelector('#tw-12-dlg');
  var stage = dlg.firstElementChild;
  // Production: replace this click trigger with scroll depth, dwell time or exit intent.
  root.querySelector('[data-tw12-open]').addEventListener('click', function () { dlg.showModal(); });
  root.querySelector('[data-tw12-close]').addEventListener('click', function () { dlg.close(); });
  dlg.addEventListener('click', function (e) {
    var r = stage.getBoundingClientRect();
    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dlg.close();
  });
})();
```

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 Newsletter Signup Modal with Depth-Layer Parallax Entrance
Source: https://codefronts.com/components/tailwind-css-modals/tailwind-newsletter-signup-modal-depth-layer-parallax/

An editorial subscribe card that arrives in layers — a red disc drifting up behind, the card settling a beat later, the backdrop blurring first. The port expresses the depth as two elements with different [transition-delay:…] and different curves, all read from the dialog's [open] state.
## HTML
```html
<section class="tw-12 w-full min-h-svh grid place-items-center bg-tw12-bg font-tw12-sans px-6 py-10">
  <button type="button" data-tw12-open class="inline-flex items-center justify-center min-h-11 px-6 rounded-md border border-tw12-ink bg-tw12-ink text-[15px] font-semibold text-tw12-card cursor-pointer transition-colors duration-200 hover:bg-black focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">Get the newsletter</button>

  <dialog id="tw-12-dlg" aria-labelledby="tw-12-title" class="m-auto w-[min(460px,94vw)] p-0 border-0 bg-transparent overflow-visible open:backdrop:bg-tw12-scrim open:backdrop:backdrop-blur-[6px]">
    <div class="relative">
      <span aria-hidden="true" class="absolute -top-10 -right-10 size-[150px] rounded-full bg-tw12-accent opacity-0 translate-y-[60px] scale-90 transition-[opacity,translate,scale] duration-500 ease-out [transition-delay:100ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 in-[dialog[open]]:scale-100 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:scale-100 motion-reduce:[transition-delay:0ms]"></span>

      <div class="relative px-8 pt-[34px] pb-7 rounded-[14px] overflow-hidden bg-tw12-card text-left text-tw12-ink shadow-[0_40px_60px_-20px_#1a1a1a66] opacity-0 translate-y-[30px] transition-[opacity,translate] duration-[450ms] ease-[cubic-bezier(.22,1,.36,1)] [transition-delay:200ms] in-[dialog[open]]:opacity-100 in-[dialog[open]]:translate-y-0 motion-reduce:transition-opacity motion-reduce:translate-y-0 motion-reduce:[transition-delay:0ms]">
        <button type="button" data-tw12-close aria-label="Close dialog" class="absolute top-3.5 right-3.5 z-10 grid place-items-center size-9 rounded-md border-0 bg-transparent text-[15px] text-tw12-sub cursor-pointer transition-colors duration-200 hover:bg-tw12-hover hover:text-tw12-ink focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-2">&#10005;</button>

        <p class="mb-2.5 text-xs font-bold uppercase tracking-[0.14em] text-tw12-accent">The Weekly Dispatch</p>
        <h2 id="tw-12-title" class="mb-2.5 font-tw12-display text-[1.7rem] font-extrabold tracking-[-0.02em] leading-tight text-balance">Ideas worth 4 minutes of your Sunday.</h2>
        <p class="mb-5 text-sm leading-relaxed text-tw12-sub text-pretty">One long-form essay on design, code, and craft. Sent Sunday. 12,400+ readers.</p>

        <form method="dialog" class="flex gap-2 mb-3 max-[400px]:flex-col">
          <label class="flex-1 block">
            <span class="sr-only">Email address</span>
            <input type="email" autofocus required autocomplete="email" placeholder="you@work.com" class="w-full min-h-11 px-3.5 rounded-lg border border-tw12-line bg-white text-[15px] text-tw12-ink placeholder:text-tw12-sub transition-[border-color,box-shadow] duration-200 focus:outline-none focus:border-tw12-ink focus:shadow-[0_0_0_3px_var(--color-tw12-ring)]">
          </label>
          <button type="submit" class="min-h-11 px-5 rounded-lg border-0 bg-tw12-ink text-[15px] font-bold text-tw12-card whitespace-nowrap cursor-pointer transition-[background-color,translate] duration-200 hover:bg-black hover:-translate-y-px focus-visible:outline-2 focus-visible:outline-tw12-accent focus-visible:outline-offset-[3px] motion-reduce:hover:translate-y-0">Subscribe &rarr;</button>
        </form>

        <p class="text-center text-xs text-tw12-sub">1-click unsubscribe · No spam, ever · GDPR-compliant</p>
      </div>
    </div>
  </dialog>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tw12-bg: #f5efe0;
  --color-tw12-bg: oklch(0.95 0.025 85);
  --color-tw12-card: #faf7f0;
  --color-tw12-card: oklch(0.97 0.012 85);
  --color-tw12-ink: #1a1a1a;
  --color-tw12-ink: oklch(0.22 0 0);
  --color-tw12-sub: #5f5a4e;
  --color-tw12-sub: oklch(0.47 0.015 80);
  --color-tw12-line: #e5dfd0;
  --color-tw12-line: oklch(0.9 0.018 85);
  --color-tw12-accent: #d12d3a;
  --color-tw12-accent: oklch(0.56 0.2 24);
  --color-tw12-hover: #1a1a1a0f;
  --color-tw12-hover: oklch(0.22 0 0 / 0.06);
  --color-tw12-ring: #1a1a1a1a;
  --color-tw12-ring: oklch(0.22 0 0 / 0.1);
  --color-tw12-scrim: #1a1a1a8c;
  --color-tw12-scrim: oklch(0.22 0 0 / 0.55);
  --font-tw12-sans: 'Outfit', system-ui, sans-serif;
  --font-tw12-display: 'Playfair Display', Georgia, serif;
}

.tw-12 {
  width: 100%;
}

#tw-12-dlg::backdrop {
  background: oklch(0.22 0 0 / 0);
  backdrop-filter: blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;
}

@starting-style {
  #tw-12-dlg[open]::backdrop {
    background: oklch(0.22 0 0 / 0);
    backdrop-filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tw-12-dlg::backdrop {
    transition-duration: .001s;
  }
}
```

## JavaScript
```js
(function () {
  var root = document.querySelector('.tw-12');
  var dlg = root.querySelector('#tw-12-dlg');
  var stage = dlg.firstElementChild;
  // Production: replace this click trigger with scroll depth, dwell time or exit intent.
  root.querySelector('[data-tw12-open]').addEventListener('click', function () { dlg.showModal(); });
  root.querySelector('[data-tw12-close]').addEventListener('click', function () { dlg.close(); });
  dlg.addEventListener('click', function (e) {
    var r = stage.getBoundingClientRect();
    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dlg.close();
  });
})();
```

How this works

Depth is difference in timing. The disc travels further, starts earlier and uses a plain ease-out; the card travels less, starts later and decelerates. Nothing is 3D — the illusion is entirely in the mismatch.

The disc is decorative and says so. aria-hidden="true" keeps it out of the accessibility tree, where a coloured circle has nothing to contribute.

One field, one action. Every extra field costs signups; name and segmentation belong in the welcome email, not the modal.

Make it yours

Trigger on scroll depth or exit intent rather than a click — the demo's button exists so the pattern is inspectable.
Reshape the decorative layer: a clip-path triangle, an organic border-radius blob, or a photo all work at the same position.
Add double opt-in copy for EU audiences, where a single modal confirmation is not valid consent.
For B2B, add one segmentation field and accept the conversion cost knowingly.

Gotchas — read before shipping

Never auto-open on load. Interstitials on entry are penalised by search engines and resented by readers; scroll depth, dwell time or exit intent are the honest triggers.
type="email" plus autocomplete="email" is what gives mobile users the @ keyboard and a one-tap fill.
Parallax is exactly the motion that provokes vestibular discomfort — the reduced-motion path must zero the offsets, not stretch them.
The one-click unsubscribe promise in the trust line is a deliverability requirement now, not a nicety; make sure the email honours it.
Decorative layers must be aria-hidden, or a screen reader announces an empty element between the heading and the form.

Browser support

Chrome	Safari	Firefox	Edge
111+ · 117+ anim	16.4+ · 17.5+ anim	128+ · 129+ anim	111+ · 117+ anim

transform and opacity transitions are universal; the dialog's @starting-style pairing degrades to an instant show.

Techniques used in this demo

Utilitiesfirst-class utility or variant

@starting-styletw ↗transition delaytw ↗pseudo elementstw ↗prefers-reduced-motiontw ↗

HTML & JSno Tailwind involved

<dialog>MDN ↗