01 / 25

Pure TailwindMIT licensed

Tailwind Blockquote with Large Decorative Quotation Marks

The most-searched quote treatment, ported whole into utilities: an editorial serif quote crowned by a giant opening mark drawn with before:content-['“']. The mark is generated (invisible to screen readers), tinted with the opacity modifier text-tbq01-acc/40 — Tailwind's spelling of color-mix() — and cropped with before:h-[0.5em] so the first line sits inside its curl.

Live DemoSep 24, 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="tbq-01 w-full min-h-svh grid place-items-center bg-tbq01-bg bg-[radial-gradient(120%_90%_at_50%_0%,var(--color-tbq01-glow),transparent_70%)] px-5 py-14 font-tbq01-serif text-tbq01-ink" aria-label="Large decorative quotation marks blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <figure class="w-full max-w-[38rem]">
      <blockquote class="before:-mb-[0.02em] before:-ml-[0.07em] before:block before:h-[0.5em] before:font-tbq01-serif before:text-[clamp(150px,22vw,220px)] before:leading-none before:text-tbq01-acc/40 before:content-['“']">
        <p class="text-[clamp(22px,3.4vw,34px)] leading-[1.38] tracking-[-0.012em] italic text-balance">Typography is the craft of endowing human language with a durable visual form. It is what turns a wall of words into a voice.</p>
      </blockquote>
      <figcaption class="mt-7 flex items-center gap-3.5 font-tbq01-sans text-sm text-tbq01-mut">
        <span aria-hidden="true" class="h-0.5 w-11 flex-none rounded-full bg-tbq01-acc"></span>
        <span><strong class="font-semibold text-tbq01-ink">Robert Bringhurst</strong> · <cite class="italic">The Elements of Typographic Style</cite></span>
      </figcaption>
    </figure>
    <p aria-hidden="true" class="rounded-full border border-tbq01-ink/12 bg-white/60 px-3.5 py-2 font-tbq01-mono text-[11.5px] text-tbq01-mut">before:content-['“'] · text-tbq01-acc/40 · text-balance</p>
  </div>
</section>

<section class="tbq-01 w-full min-h-svh grid place-items-center bg-tbq01-bg bg-[radial-gradient(120%_90%_at_50%_0%,var(--color-tbq01-glow),transparent_70%)] px-5 py-14 font-tbq01-serif text-tbq01-ink" aria-label="Large decorative quotation marks blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <figure class="w-full max-w-[38rem]">
      <blockquote class="before:-mb-[0.02em] before:-ml-[0.07em] before:block before:h-[0.5em] before:font-tbq01-serif before:text-[clamp(150px,22vw,220px)] before:leading-none before:text-tbq01-acc/40 before:content-['“']">
        <p class="text-[clamp(22px,3.4vw,34px)] leading-[1.38] tracking-[-0.012em] italic text-balance">Typography is the craft of endowing human language with a durable visual form. It is what turns a wall of words into a voice.</p>
      </blockquote>
      <figcaption class="mt-7 flex items-center gap-3.5 font-tbq01-sans text-sm text-tbq01-mut">
        <span aria-hidden="true" class="h-0.5 w-11 flex-none rounded-full bg-tbq01-acc"></span>
        <span><strong class="font-semibold text-tbq01-ink">Robert Bringhurst</strong> · <cite class="italic">The Elements of Typographic Style</cite></span>
      </figcaption>
    </figure>
    <p aria-hidden="true" class="rounded-full border border-tbq01-ink/12 bg-white/60 px-3.5 py-2 font-tbq01-mono text-[11.5px] text-tbq01-mut">before:content-['“'] · text-tbq01-acc/40 · text-balance</p>
  </div>
</section>

@import "tailwindcss";

@theme {
  --color-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@theme {
  --color-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}

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-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@theme {
  --color-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}

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=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&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=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;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.

The entire blockquote::before rule became nine before: utilities on the element that shows the mark — nothing left in CSS but the @theme tokens.
color-mix(in oklch, var(--acc) 32%, transparent) became the opacity modifier /40; same derivation, one character to retune.
UI upgrade from the CSS original: the mark now scales with the viewport (clamp(150px,22vw,220px)) instead of a fixed 8.5em, so it no longer dwarfs the quote on phones, and the serif moved to Newsreader's optical-size italic for a sharper editorial voice.
UI upgrade: muted caption copy went from oklch(0.52) to 0.46 (now 6.4:1 on the cream stage), and the book title is a real <cite>.

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 Blockquote with Large Decorative Quotation Marks
Source: https://codefronts.com/snippets/tailwind-css-blockquotes/tailwind-blockquote-large-decorative-quotation-marks/

The most-searched quote treatment, ported whole into utilities: an editorial serif quote crowned by a giant opening mark drawn with before:content-['“']. The mark is generated (invisible to screen readers), tinted with the opacity modifier text-tbq01-acc/40 — Tailwind's spelling of color-mix() — and cropped with before:h-[0.5em] so the first line sits inside its curl.
## HTML
```html
<section class="tbq-01 w-full min-h-svh grid place-items-center bg-tbq01-bg bg-[radial-gradient(120%_90%_at_50%_0%,var(--color-tbq01-glow),transparent_70%)] px-5 py-14 font-tbq01-serif text-tbq01-ink" aria-label="Large decorative quotation marks blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <figure class="w-full max-w-[38rem]">
      <blockquote class="before:-mb-[0.02em] before:-ml-[0.07em] before:block before:h-[0.5em] before:font-tbq01-serif before:text-[clamp(150px,22vw,220px)] before:leading-none before:text-tbq01-acc/40 before:content-['“']">
        <p class="text-[clamp(22px,3.4vw,34px)] leading-[1.38] tracking-[-0.012em] italic text-balance">Typography is the craft of endowing human language with a durable visual form. It is what turns a wall of words into a voice.</p>
      </blockquote>
      <figcaption class="mt-7 flex items-center gap-3.5 font-tbq01-sans text-sm text-tbq01-mut">
        <span aria-hidden="true" class="h-0.5 w-11 flex-none rounded-full bg-tbq01-acc"></span>
        <span><strong class="font-semibold text-tbq01-ink">Robert Bringhurst</strong> · <cite class="italic">The Elements of Typographic Style</cite></span>
      </figcaption>
    </figure>
    <p aria-hidden="true" class="rounded-full border border-tbq01-ink/12 bg-white/60 px-3.5 py-2 font-tbq01-mono text-[11.5px] text-tbq01-mut">before:content-['“'] · text-tbq01-acc/40 · text-balance</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}
```

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 Blockquote with Large Decorative Quotation Marks
Source: https://codefronts.com/snippets/tailwind-css-blockquotes/tailwind-blockquote-large-decorative-quotation-marks/

The most-searched quote treatment, ported whole into utilities: an editorial serif quote crowned by a giant opening mark drawn with before:content-['“']. The mark is generated (invisible to screen readers), tinted with the opacity modifier text-tbq01-acc/40 — Tailwind's spelling of color-mix() — and cropped with before:h-[0.5em] so the first line sits inside its curl.
## HTML
```html
<section class="tbq-01 w-full min-h-svh grid place-items-center bg-tbq01-bg bg-[radial-gradient(120%_90%_at_50%_0%,var(--color-tbq01-glow),transparent_70%)] px-5 py-14 font-tbq01-serif text-tbq01-ink" aria-label="Large decorative quotation marks blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <figure class="w-full max-w-[38rem]">
      <blockquote class="before:-mb-[0.02em] before:-ml-[0.07em] before:block before:h-[0.5em] before:font-tbq01-serif before:text-[clamp(150px,22vw,220px)] before:leading-none before:text-tbq01-acc/40 before:content-['“']">
        <p class="text-[clamp(22px,3.4vw,34px)] leading-[1.38] tracking-[-0.012em] italic text-balance">Typography is the craft of endowing human language with a durable visual form. It is what turns a wall of words into a voice.</p>
      </blockquote>
      <figcaption class="mt-7 flex items-center gap-3.5 font-tbq01-sans text-sm text-tbq01-mut">
        <span aria-hidden="true" class="h-0.5 w-11 flex-none rounded-full bg-tbq01-acc"></span>
        <span><strong class="font-semibold text-tbq01-ink">Robert Bringhurst</strong> · <cite class="italic">The Elements of Typographic Style</cite></span>
      </figcaption>
    </figure>
    <p aria-hidden="true" class="rounded-full border border-tbq01-ink/12 bg-white/60 px-3.5 py-2 font-tbq01-mono text-[11.5px] text-tbq01-mut">before:content-['“'] · text-tbq01-acc/40 · text-balance</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbq01-bg: #f8f5ef;
  --color-tbq01-bg: oklch(0.97 0.008 85);
  --color-tbq01-glow: #fffdfa;
  --color-tbq01-glow: oklch(0.995 0.004 85);
  --color-tbq01-ink: #261d16;
  --color-tbq01-ink: oklch(0.24 0.02 60);
  --color-tbq01-mut: #61564d;
  --color-tbq01-mut: oklch(0.46 0.02 60);
  --color-tbq01-acc: #af5331;
  --color-tbq01-acc: oklch(0.55 0.13 40);
  --font-tbq01-serif: 'Newsreader', Georgia, serif;
  --font-tbq01-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-tbq01-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* 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. */

.tbq-01 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

One pseudo-element, declared where it renders. The CSS original kept the glyph in a blockquote::before rule; here it lives on the blockquote itself:

<blockquote class="before:block before:h-[0.5em] before:leading-none
  before:text-[clamp(150px,22vw,220px)] before:text-tbq01-acc/40
  before:content-['“'] before:-mb-[0.02em] before:-ml-[0.07em]">

Why the literal glyph. content-['\201C'] works in a stylesheet but backslash escapes inside a class attribute are fragile across templating languages. Pasting the real LEFT DOUBLE QUOTATION MARK (“) into the arbitrary value is safer and reads better in review.

The crop is load-bearing. A 150px glyph reserves a ~180px line box; before:h-[0.5em] clips that to the mark's visible bowl, and the negative margins tuck it into the text's optical edge. Remove them and the quote drops a hundred pixels.

Make it yours

Closing mark: add after:content-['”'] after:float-right after:-mt-[0.35em] with the same size/colour utilities.
Solid mark: swap /40 for full-strength text-tbq01-acc and drop to before:text-7xl for a punchier, denser look.
Hanging mark: add relative before:absolute before:-left-[0.55em] on wide layouts to hang the glyph in the gutter.
Re-theme: edit --color-tbq01-acc in @theme — rule, glyph and hover ink all follow.

Gotchas — read before shipping

Tailwind adds content: var(--tw-content) automatically for before:; if you set other before utilities without before:content-[…], the pseudo-element renders empty — that is correct, not a bug.
Underscores in arbitrary values become spaces: write clamp(104px,15vw,152px) with no spaces rather than escaping them.
Attribution belongs outside <blockquote>; <cite> is for the work's title, not the person's name.

Browser support

Chrome	Safari	Firefox	Edge
111+	16.4+	128+	111+

Generated content is universal; the floor is Tailwind v4's own sheet (cascade layers, @property, color-mix()). text-balance is progressive (Chrome 114 / Safari 17.5 / Firefox 121).

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗content propertytw ↗color-mix()tw ↗

Arbitraryneeds bracket syntax

clamp()tw ↗