05 / 25

Pure TailwindMIT licensed

Modern Minimalist Left Border Tailwind Blockquote

The quiet blog quote: a 2px logical rule (border-s-2, so it flips in RTL) and a serif italic line. The Tailwind port keeps the hover accent but fixes how it moves — instead of animating padding (which reflowed every line of the quote), an accent rail draws down over the grey rule with before:scale-y-0 hover:before:scale-y-100, compositor-only.

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-05 w-full min-h-svh grid place-items-center bg-tbq05-bg px-5 py-14 font-tbq05-sans text-tbq05-ink" aria-label="Minimalist left border blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <article class="w-full max-w-[60ch] text-[16.5px] leading-[1.72]">
      <p class="mb-2.5 text-xs font-semibold tracking-[0.12em] uppercase text-tbq05-mut">Design notes · 4 min read</p>
      <h1 class="mb-4 text-[clamp(26px,3.2vw,34px)] font-bold leading-[1.18] tracking-[-0.025em] text-balance">Interfaces that get out of the way</h1>
      <p class="text-tbq05-quiet text-pretty">The best tools disappear while you use them. We spent a year removing features from our editor, and usage went up every quarter. One reviewer put it better than we ever managed to:</p>
      <blockquote class="relative my-[1.6em] border-s-2 border-tbq05-rule ps-[1.25em] before:absolute before:inset-y-0 before:-start-0.5 before:w-0.5 before:origin-top before:scale-y-0 before:bg-tbq05-acc before:transition-transform before:duration-500 before:ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:before:scale-y-100 motion-reduce:before:transition-none">
        <p class="font-tbq05-serif text-[1.2em] leading-[1.55] italic text-tbq05-ink/85 text-pretty">It feels less like software and more like a well-lit room. Nothing asks for my attention until I ask for it, and then it is exactly where my hand already was.</p>
      </blockquote>
      <p class="text-tbq05-quiet text-pretty">That sentence is now taped above the team's door. Restraint, it turns out, is a feature you ship by deleting.</p>
    </article>
    <p aria-hidden="true" class="rounded-full border border-black/8 bg-white px-3.5 py-2 font-tbq05-mono text-[11.5px] text-tbq05-mut">border-s-2 · before:scale-y rail · RTL-safe</p>
  </div>
</section>

<section class="tbq-05 w-full min-h-svh grid place-items-center bg-tbq05-bg px-5 py-14 font-tbq05-sans text-tbq05-ink" aria-label="Minimalist left border blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <article class="w-full max-w-[60ch] text-[16.5px] leading-[1.72]">
      <p class="mb-2.5 text-xs font-semibold tracking-[0.12em] uppercase text-tbq05-mut">Design notes · 4 min read</p>
      <h1 class="mb-4 text-[clamp(26px,3.2vw,34px)] font-bold leading-[1.18] tracking-[-0.025em] text-balance">Interfaces that get out of the way</h1>
      <p class="text-tbq05-quiet text-pretty">The best tools disappear while you use them. We spent a year removing features from our editor, and usage went up every quarter. One reviewer put it better than we ever managed to:</p>
      <blockquote class="relative my-[1.6em] border-s-2 border-tbq05-rule ps-[1.25em] before:absolute before:inset-y-0 before:-start-0.5 before:w-0.5 before:origin-top before:scale-y-0 before:bg-tbq05-acc before:transition-transform before:duration-500 before:ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:before:scale-y-100 motion-reduce:before:transition-none">
        <p class="font-tbq05-serif text-[1.2em] leading-[1.55] italic text-tbq05-ink/85 text-pretty">It feels less like software and more like a well-lit room. Nothing asks for my attention until I ask for it, and then it is exactly where my hand already was.</p>
      </blockquote>
      <p class="text-tbq05-quiet text-pretty">That sentence is now taped above the team's door. Restraint, it turns out, is a feature you ship by deleting.</p>
    </article>
    <p aria-hidden="true" class="rounded-full border border-black/8 bg-white px-3.5 py-2 font-tbq05-mono text-[11.5px] text-tbq05-mut">border-s-2 · before:scale-y rail · RTL-safe</p>
  </div>
</section>

@import "tailwindcss";

@theme {
  --color-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@theme {
  --color-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  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-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  width: 100%;
  min-height: 100svh;
}

@import "tailwindcss";

@theme {
  --color-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  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=Geist:wght@400..800&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&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=Geist:wght@400..800&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap">

What changed in the port

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

border-inline-start / padding-inline-start map one-to-one onto border-s-2 / ps-[1.25em] — the port keeps the original's RTL safety.
The hover rule .quote:hover{border-color;padding-inline-start} was replaced rather than ported; see the upgrade below.
UI upgrade from the CSS original: the hover no longer reflows the paragraph — an accent rail draws down over the grey rule with a transform, so the text stays perfectly still.
UI upgrade: the quote is now a serif italic at 1.2em (was body sans at 1.06em), giving it a distinct voice from the surrounding article; body copy darkened from 0.45 to 0.4.

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: Modern Minimalist Left Border Tailwind Blockquote
Source: https://codefronts.com/snippets/tailwind-css-blockquotes/modern-minimalist-left-border-tailwind-blockquote/

The quiet blog quote: a 2px logical rule (border-s-2, so it flips in RTL) and a serif italic line. The Tailwind port keeps the hover accent but fixes how it moves — instead of animating padding (which reflowed every line of the quote), an accent rail draws down over the grey rule with before:scale-y-0 hover:before:scale-y-100, compositor-only.
## HTML
```html
<section class="tbq-05 w-full min-h-svh grid place-items-center bg-tbq05-bg px-5 py-14 font-tbq05-sans text-tbq05-ink" aria-label="Minimalist left border blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <article class="w-full max-w-[60ch] text-[16.5px] leading-[1.72]">
      <p class="mb-2.5 text-xs font-semibold tracking-[0.12em] uppercase text-tbq05-mut">Design notes · 4 min read</p>
      <h1 class="mb-4 text-[clamp(26px,3.2vw,34px)] font-bold leading-[1.18] tracking-[-0.025em] text-balance">Interfaces that get out of the way</h1>
      <p class="text-tbq05-quiet text-pretty">The best tools disappear while you use them. We spent a year removing features from our editor, and usage went up every quarter. One reviewer put it better than we ever managed to:</p>
      <blockquote class="relative my-[1.6em] border-s-2 border-tbq05-rule ps-[1.25em] before:absolute before:inset-y-0 before:-start-0.5 before:w-0.5 before:origin-top before:scale-y-0 before:bg-tbq05-acc before:transition-transform before:duration-500 before:ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:before:scale-y-100 motion-reduce:before:transition-none">
        <p class="font-tbq05-serif text-[1.2em] leading-[1.55] italic text-tbq05-ink/85 text-pretty">It feels less like software and more like a well-lit room. Nothing asks for my attention until I ask for it, and then it is exactly where my hand already was.</p>
      </blockquote>
      <p class="text-tbq05-quiet text-pretty">That sentence is now taped above the team's door. Restraint, it turns out, is a feature you ship by deleting.</p>
    </article>
    <p aria-hidden="true" class="rounded-full border border-black/8 bg-white px-3.5 py-2 font-tbq05-mono text-[11.5px] text-tbq05-mut">border-s-2 · before:scale-y rail · RTL-safe</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  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: Modern Minimalist Left Border Tailwind Blockquote
Source: https://codefronts.com/snippets/tailwind-css-blockquotes/modern-minimalist-left-border-tailwind-blockquote/

The quiet blog quote: a 2px logical rule (border-s-2, so it flips in RTL) and a serif italic line. The Tailwind port keeps the hover accent but fixes how it moves — instead of animating padding (which reflowed every line of the quote), an accent rail draws down over the grey rule with before:scale-y-0 hover:before:scale-y-100, compositor-only.
## HTML
```html
<section class="tbq-05 w-full min-h-svh grid place-items-center bg-tbq05-bg px-5 py-14 font-tbq05-sans text-tbq05-ink" aria-label="Minimalist left border blockquote demo">
  <div class="grid w-full justify-items-center gap-8">
    <article class="w-full max-w-[60ch] text-[16.5px] leading-[1.72]">
      <p class="mb-2.5 text-xs font-semibold tracking-[0.12em] uppercase text-tbq05-mut">Design notes · 4 min read</p>
      <h1 class="mb-4 text-[clamp(26px,3.2vw,34px)] font-bold leading-[1.18] tracking-[-0.025em] text-balance">Interfaces that get out of the way</h1>
      <p class="text-tbq05-quiet text-pretty">The best tools disappear while you use them. We spent a year removing features from our editor, and usage went up every quarter. One reviewer put it better than we ever managed to:</p>
      <blockquote class="relative my-[1.6em] border-s-2 border-tbq05-rule ps-[1.25em] before:absolute before:inset-y-0 before:-start-0.5 before:w-0.5 before:origin-top before:scale-y-0 before:bg-tbq05-acc before:transition-transform before:duration-500 before:ease-[cubic-bezier(0.2,0.7,0.2,1)] hover:before:scale-y-100 motion-reduce:before:transition-none">
        <p class="font-tbq05-serif text-[1.2em] leading-[1.55] italic text-tbq05-ink/85 text-pretty">It feels less like software and more like a well-lit room. Nothing asks for my attention until I ask for it, and then it is exactly where my hand already was.</p>
      </blockquote>
      <p class="text-tbq05-quiet text-pretty">That sentence is now taped above the team's door. Restraint, it turns out, is a feature you ship by deleting.</p>
    </article>
    <p aria-hidden="true" class="rounded-full border border-black/8 bg-white px-3.5 py-2 font-tbq05-mono text-[11.5px] text-tbq05-mut">border-s-2 · before:scale-y rail · RTL-safe</p>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tbq05-bg: #fbfaf8;
  --color-tbq05-bg: oklch(0.985 0.003 90);
  --color-tbq05-ink: #1f1c18;
  --color-tbq05-ink: oklch(0.23 0.01 80);
  --color-tbq05-quiet: #4b4742;
  --color-tbq05-quiet: oklch(0.4 0.01 80);
  --color-tbq05-mut: #68625a;
  --color-tbq05-mut: oklch(0.5 0.015 80);
  --color-tbq05-rule: #cecac3;
  --color-tbq05-rule: oklch(0.84 0.01 80);
  --color-tbq05-acc: #0a9068;
  --color-tbq05-acc: oklch(0.58 0.12 165);
  --font-tbq05-sans: 'Geist', system-ui, sans-serif;
  --font-tbq05-serif: 'Newsreader', Georgia, serif;
  --font-tbq05-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-05 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Two rails, one visible at rest. The grey rule is the blockquote's own border; the accent is a pseudo-element pinned over it and collapsed to zero height:

<blockquote class="relative border-s-2 border-tbq05-rule ps-[1.25em]
  before:absolute before:inset-y-0 before:-start-0.5 before:w-0.5
  before:origin-top before:scale-y-0 before:bg-tbq05-acc
  before:transition-transform hover:before:scale-y-100">

Why not animate the padding? The original nudged padding-inline-start from 1.25em to 1.5em on hover, which re-wraps the paragraph on every frame. A scale on the rail touches no layout at all.

-start-0.5 is the logical inset-inline-start; together with border-s and ps the whole component mirrors correctly under dir="rtl".

Make it yours

No hover at all: delete the before: utilities — what remains is the classic two-class blockquote.
Always-accent: replace border-tbq05-rule with border-tbq05-acc and drop the pseudo-element.
Draw from the centre: before:origin-center.

Gotchas — read before shipping

-start-0.5 must match the border width (border-s-2 = 2px = 0.5) or the rail sits beside the rule instead of on it.
The pseudo-element needs relative on the blockquote, and Tailwind's auto content only applies once any before: utility is present.
Hover is decoration here, not an affordance — the quote isn't interactive, so it correctly has no focus state.

Browser support

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

Logical border/padding/inset properties are universal in evergreen browsers; the floor is Tailwind v4's sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

pseudo elementstw ↗transitionstw ↗prefers-reduced-motiontw ↗