Blog Read Next Base

<section class="ws-blog-read-next ws-read-next border-t border-slate-200 bg-[var(--ws-color-surface)] py-12">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="mb-8 text-xl font-bold text-slate-900">Read Next</h2>

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 -->
      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600">
        <div class="aspect-video overflow-hidden rounded-lg">
          <div class="h-full w-full bg-gradient-to-br from-blue-100 to-indigo-200 transition-transform duration-300 group-hover:scale-105 dark:from-blue-900/30 dark:to-indigo-900/30"></div>
        </div>
        <div class="mt-3 flex items-center gap-2 text-xs text-slate-400">
          <span class="rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700">Design</span>
          <span>·</span>
          <time>Mar 20</time>
        </div>
        <h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Component Architecture Best Practices</h3>
        <p class="mt-1 text-xs text-slate-500 line-clamp-2">How to structure reusable UI patterns for maximum flexibility and maintainability.</p>
      </a>

      <!-- Card 2 -->
      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600">
        <div class="aspect-video overflow-hidden rounded-lg">
          <div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-200 transition-transform duration-300 group-hover:scale-105 dark:from-emerald-900/30 dark:to-teal-900/30"></div>
        </div>
        <div class="mt-3 flex items-center gap-2 text-xs text-slate-400">
          <span class="rounded-full bg-emerald-100 px-2 py-0.5 font-medium text-emerald-700">CSS</span>
          <span>·</span>
          <time>Mar 18</time>
        </div>
        <h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Modern CSS Techniques for 2026</h3>
        <p class="mt-1 text-xs text-slate-500 line-clamp-2">Container queries, :has() selector, and scroll-driven animations you should know.</p>
      </a>

      <!-- Card 3 -->
      <a href="#" class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 transition hover:shadow-md dark:hover:border-slate-600 sm:col-span-2 lg:col-span-1">
        <div class="aspect-video overflow-hidden rounded-lg">
          <div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-200 transition-transform duration-300 group-hover:scale-105 dark:from-amber-900/30 dark:to-orange-900/30"></div>
        </div>
        <div class="mt-3 flex items-center gap-2 text-xs text-slate-400">
          <span class="rounded-full bg-amber-100 px-2 py-0.5 font-medium text-amber-700">Tutorial</span>
          <span>·</span>
          <time>Mar 15</time>
        </div>
        <h3 class="mt-2 text-sm font-semibold text-slate-900 group-hover:text-blue-600 dark:group-hover:text-blue-400">Building with Tailwind v4</h3>
        <p class="mt-1 text-xs text-slate-500 line-clamp-2">A hands-on guide to the new CSS-first configuration and @theme directive.</p>
      </a>
    </div>
  </div>
</section>