Tailwind UI Pattern Registry for humans and agents

blog minimal reading clean listing articles minimal

Blog Minimal

Clean minimal blog listing with article entries, excerpts, dates, and pagination.

minimal Responsive
Live Preview

Sections

headerarticlespaginationfooter

Patterns used

pagination/base
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notes — A Minimal Blog</title>
  <meta name="description" content="Clean, minimal blog listing with simple article entries and pagination." />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
  <link rel="stylesheet" href="https://webspire.de/webspire-components.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    body { font-family: 'Inter', sans-serif; }

    /* Brand tokens */
    :root {
      --ws-color-accent: oklch(0.48 0.18 265);
    }

    /* interactions/underline-draw */
    .underline-draw {
      --underline-color: currentColor;
      --underline-speed: 0.25s;
      display: inline;
      padding-bottom: 0.0625rem;
      background: linear-gradient(to right, var(--underline-color) 0%, var(--underline-color) 98%);
      background-size: 0 1px;
      background-repeat: no-repeat;
      background-position: left 98%;
      transition: background-size var(--underline-speed) ease;
      text-decoration: none;
    }
    .underline-draw:hover,
    .underline-draw:focus-visible {
      background-size: 100% 1px;
    }
    @media (prefers-reduced-motion: reduce) {
      .underline-draw { transition: none; }
    }
  </style>
</head>
<body class="bg-white text-gray-900 antialiased">

  <!-- Header -->
  <header class="ws-navbar max-w-2xl mx-auto px-4 pt-16 pb-10">
    <a href="#" class="text-2xl font-bold text-gray-900 hover:text-gray-700 transition-colors">Notes</a>
    <p class="mt-2 text-gray-500 text-sm">Thoughts on design, development, and building products.</p>
    <nav class="mt-6 flex items-center gap-6 text-sm font-medium text-gray-500" aria-label="Main navigation">
      <a href="#" class="text-gray-900">Blog</a>
      <a href="#" class="underline-draw hover:text-gray-900 transition-colors">About</a>
      <a href="#" class="underline-draw hover:text-gray-900 transition-colors">Projects</a>
      <a href="#" class="underline-draw hover:text-gray-900 transition-colors">RSS</a>
    </nav>
  </header>

  <!-- Articles -->
  <main class="ws-blog max-w-2xl mx-auto px-4 pb-16">
    <div class="divide-y divide-gray-100">

      <article class="py-8 group">
        <a href="#" class="block">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 group-hover:text-[oklch(0.48_0.18_265)] transition-colors">The Case for Server-Side Rendering in 2026</h2>
              <p class="mt-2 text-sm text-gray-500 leading-relaxed">After years of client-heavy SPAs, the industry is shifting back to the server. Here's why SSR with islands architecture is the sweet spot for most web applications, and how frameworks like Astro are leading the charge.</p>
            </div>
            <time class="text-xs text-gray-400 whitespace-nowrap pt-1.5" datetime="2026-03-21">Mar 21</time>
          </div>
        </a>
      </article>

      <article class="py-8 group">
        <a href="#" class="block">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 group-hover:text-[oklch(0.48_0.18_265)] transition-colors">Design Systems Don't Scale (The Way You Think)</h2>
              <p class="mt-2 text-sm text-gray-500 leading-relaxed">Most design systems fail not because of bad components, but because they don't account for the social dynamics of the teams using them. A look at what actually makes design systems succeed at scale.</p>
            </div>
            <time class="text-xs text-gray-400 whitespace-nowrap pt-1.5" datetime="2026-03-18">Mar 18</time>
          </div>
        </a>
      </article>

      <article class="py-8 group">
        <a href="#" class="block">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 group-hover:text-[oklch(0.48_0.18_265)] transition-colors">Tailwind v4: A CSS-First Revolution</h2>
              <p class="mt-2 text-sm text-gray-500 leading-relaxed">Tailwind v4 dropped the JavaScript config in favor of CSS-native configuration. I've been using it for three months now, and it fundamentally changed how I think about utility-first CSS.</p>
            </div>
            <time class="text-xs text-gray-400 whitespace-nowrap pt-1.5" datetime="2026-03-14">Mar 14</time>
          </div>
        </a>
      </article>

      <article class="py-8 group">
        <a href="#" class="block">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 group-hover:text-[oklch(0.48_0.18_265)] transition-colors">Why I Stopped Using State Management Libraries</h2>
              <p class="mt-2 text-sm text-gray-500 leading-relaxed">Redux, Zustand, Jotai — I've used them all. But after building several production apps without any global state library, I'm convinced most applications don't need one. Here's what I use instead.</p>
            </div>
            <time class="text-xs text-gray-400 whitespace-nowrap pt-1.5" datetime="2026-03-10">Mar 10</time>
          </div>
        </a>
      </article>

      <article class="py-8 group">
        <a href="#" class="block">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 class="text-lg font-semibold text-gray-900 group-hover:text-[oklch(0.48_0.18_265)] transition-colors">Building a Personal Knowledge Base with Obsidian and AI</h2>
              <p class="mt-2 text-sm text-gray-500 leading-relaxed">My workflow for capturing, connecting, and resurfacing ideas using Obsidian's graph view combined with local LLM embeddings. A practical guide to building your second brain.</p>
            </div>
            <time class="text-xs text-gray-400 whitespace-nowrap pt-1.5" datetime="2026-03-06">Mar 6</time>
          </div>
        </a>
      </article>

    </div>

    <!-- Pagination -->
    <nav class="ws-pagination mt-8 flex items-center justify-between border-t border-gray-100 pt-6" aria-label="Pagination">
      <span class="text-sm text-gray-400">Page 1 of 12</span>
      <div class="flex items-center gap-2">
        <span class="px-3 py-1.5 text-sm text-gray-300 cursor-not-allowed">Previous</span>
        <a href="#" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors">Next</a>
      </div>
    </nav>
  </main>

  <!-- Footer -->
  <footer class="ws-footer border-t border-gray-100">
    <div class="max-w-2xl mx-auto px-4 py-8">
      <div class="flex items-center justify-between">
        <p class="text-xs text-gray-400">&copy; 2026 Notes. All rights reserved.</p>
        <div class="flex items-center gap-4 text-xs text-gray-400">
          <a href="#" class="hover:text-gray-700 transition-colors">Twitter</a>
          <a href="#" class="hover:text-gray-700 transition-colors">GitHub</a>
          <a href="#" class="hover:text-gray-700 transition-colors">RSS</a>
        </div>
      </div>
    </div>
  </footer>

</body>
</html>

Minimalist blog listing focused on readability. Five article entries with date, title, and excerpt in a narrow reading column. Simple pagination and a minimal footer.