index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>site-sections: page sections you can paste</title>
<meta name="description" content="Copy-paste Tailwind CSS page sections: heroes, features, how it works, testimonials, pricing, FAQ, calls to action, footers and content grids. Live previews at desktop, tablet and phone widths.">
<!-- Generated by build.mjs from sections.json and sections/. Don't edit this file by hand. -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @custom-variant dark (&:where(.dark, .dark *));
  @theme {
    --color-brand-50: #eef2ff;
    --color-brand-500: #4f46e5;
    --color-brand-600: #4338ca;
  }
</style>
<script>
  try { if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark') } catch {}
</script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<style>
  pre[class*="language-"] { margin: 0; border-radius: 0; font-size: 0.8125rem; max-height: 32rem; }
</style>
</head>
<body class="bg-neutral-50 text-neutral-900 antialiased dark:bg-neutral-900 dark:text-neutral-100">
<nav class="sticky top-0 z-10 border-b border-black/10 bg-neutral-50/90 backdrop-blur dark:border-white/10 dark:bg-neutral-900/90">
  <div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-2 px-6 py-4">
    <a href="index.html" class="font-bold tracking-tight">site-sections</a>
    <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm font-medium">
        <a href="heroes.html" class="whitespace-nowrap hover:text-brand-600">Heroes</a>
        <a href="features.html" class="whitespace-nowrap hover:text-brand-600">Features</a>
        <a href="steps.html" class="whitespace-nowrap hover:text-brand-600">How it works</a>
        <a href="social-proof.html" class="whitespace-nowrap hover:text-brand-600">Social proof</a>
        <a href="pricing.html" class="whitespace-nowrap hover:text-brand-600">Pricing and FAQ</a>
        <a href="cta-footers.html" class="whitespace-nowrap hover:text-brand-600">Calls to action and footers</a>
        <a href="content.html" class="whitespace-nowrap hover:text-brand-600">Content</a>
      <a href="https://github.com/BootForm/site-sections" class="hover:text-brand-600">GitHub</a>
      <button id="theme-toggle" type="button" aria-label="Toggle dark mode" class="rounded-md border border-black/10 px-2 py-1 text-xs dark:border-white/20">
        <span class="dark:hidden">Dark</span><span class="hidden dark:inline">Light</span>
      </button>
    </div>
  </div>
</nav>
<main>
  <div class="mx-auto max-w-3xl px-6 py-20 text-center">
    <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">Page sections you can paste</h1>
    <p class="mx-auto mt-4 max-w-xl text-lg text-black/70 dark:text-white/70">Heroes, feature grids, testimonials, pricing, FAQs, footers. Each one renders live next to its code, at desktop, tablet or phone width, in light or dark mode.</p>
    <p class="mt-3 text-sm text-black/50 dark:text-white/50">27 sections. Tailwind CSS v4, light and dark, every one checked at desktop and phone widths.</p>
  </div>
  <div class="mx-auto grid max-w-6xl gap-6 px-6 pb-16 sm:grid-cols-2 lg:grid-cols-3">
    <a href="heroes.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Heroes <span class="text-sm font-normal text-black/50 dark:text-white/50">5</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Centered, Split with image, Photo backdrop, With a form, Announcement and screenshot.</p>
    </a>
    <a href="features.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Features <span class="text-sm font-normal text-black/50 dark:text-white/50">5</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Icon grid, Alternating image and text, Tabs, Sticky heading, Bento grid.</p>
    </a>
    <a href="steps.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">How it works <span class="text-sm font-normal text-black/50 dark:text-white/50">2</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Numbered steps, Timeline.</p>
    </a>
    <a href="social-proof.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Social proof <span class="text-sm font-normal text-black/50 dark:text-white/50">4</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Testimonial cards, Quote banner, Logo strip, Stats row.</p>
    </a>
    <a href="pricing.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Pricing and FAQ <span class="text-sm font-normal text-black/50 dark:text-white/50">4</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Two tiers, Three tiers, Comparison table, FAQ accordion.</p>
    </a>
    <a href="cta-footers.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Calls to action and footers <span class="text-sm font-normal text-black/50 dark:text-white/50">4</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Call-to-action band, Newsletter band, Simple footer, Footer with columns.</p>
    </a>
    <a href="content.html" class="group rounded-xl border border-black/10 bg-white p-6 transition hover:border-brand-500 dark:border-white/10 dark:bg-white/5">
      <h2 class="text-lg font-bold group-hover:text-brand-600">Content <span class="text-sm font-normal text-black/50 dark:text-white/50">3</span></h2>
      <p class="mt-2 text-sm text-black/70 dark:text-white/70">Card grid, Team, Photo gallery.</p>
    </a>
  </div>
  <div class="mx-auto max-w-3xl px-6 pb-20">
    <div class="rounded-xl border border-black/10 bg-brand-50 p-6 text-sm leading-relaxed dark:border-white/10 dark:bg-brand-500/10">
      <h2 class="text-base font-bold">Before you paste one</h2>
      <ul class="mt-3 list-disc space-y-2 pl-5 text-black/70 dark:text-white/70"><li><b>Tailwind CSS v4.</b> Every snippet uses Tailwind v4 syntax, including the trailing <code>!</code> (important) on some classes. Your site needs Tailwind v4 set up, which every <a class="underline" href="https://github.com/BootForm">BootForm template</a> already has.</li><li><b>Your brand colour.</b> Snippets use <code>brand-50</code>, <code>brand-500</code> and <code>brand-600</code>. Define those three in your <code>@theme</code> block, or find and replace <code>brand</code> with a Tailwind colour such as <code>indigo</code>.</li><li><b>Why some classes end in <code>!</code>.</b> Pasted into a VitePress page, VitePress's own styles for headings, paragraphs, links, lists and tables beat plain Tailwind classes. The <code>!</code> goes exactly on the classes that would otherwise lose. Outside VitePress it does no harm.</li><li><b>Links and images.</b> Links point at <code>#</code> and images come from <a class="underline" href="https://picsum.photos">Picsum Photos</a>. Swap both for your own. On a VitePress site served from a subpath (GitHub Pages), write an internal link as <code>:href="withBase('/contact')"</code>, not <code>href="/contact"</code>.</li><li><b>Forms.</b> The two sections with a form post to <code>https://f.bootform.com/__YOUR_FORM_ID__</code>. Generate your own form ID at <a class="underline" href="https://bootform.com/uuidgenerator">bootform.com/uuidgenerator</a> and claim it before the page goes live, or point <code>action</code> at any other backend.</li><li><b>Using Claude Code?</b> The <code>add-section</code> skill in <a class="underline" href="https://github.com/BootForm/site-skills">BootForm/site-skills</a> pastes any of these into your page and adapts it for you.</li></ul>
    </div>
  </div>
</main>
<footer class="border-t border-black/10 px-6 py-8 text-center text-sm text-black/50 dark:border-white/10 dark:text-white/50">
  Built by <a href="https://bootform.com" class="underline">BootForm</a>. Part of
  <a href="https://github.com/BootForm" class="underline">github.com/BootForm</a>: free templates, and a working contact form for whatever you build.
</footer>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script>
  // Dark mode: flip .dark on this page and on every preview iframe.
  const frames = () => document.querySelectorAll('iframe[data-preview]')
  document.getElementById('theme-toggle').addEventListener('click', () => {
    const dark = document.documentElement.classList.toggle('dark')
    try { localStorage.setItem('theme', dark ? 'dark' : 'light') } catch {}
    frames().forEach((f) => f.contentDocument?.documentElement.classList.toggle('dark', dark))
  })

  // Each preview iframe grows to fit its content, so there's never a scrollbar inside a preview.
  function fit(frame) {
    const doc = frame.contentDocument
    if (doc?.body) frame.style.height = doc.documentElement.scrollHeight + 'px'
  }
  frames().forEach((frame) => {
    frame.addEventListener('load', () => {
      fit(frame)
      new ResizeObserver(() => fit(frame)).observe(frame.contentDocument.body)
      frame.contentDocument.addEventListener('click', (e) => { if (e.target.closest('a[href="#"]')) e.preventDefault() })
    })
  })

  // Desktop / Tablet / Mobile: changes the iframe's width, which is what media queries respond to.
  document.querySelectorAll('[data-width]').forEach((button) => {
    button.addEventListener('click', () => {
      const box = button.closest('section')
      box.querySelector('iframe').style.width = button.dataset.width
      box.querySelectorAll('[data-width]').forEach((b) => b.setAttribute('aria-pressed', String(b === button)))
    })
  })

  // Hand-rolled copy button: Prism's own plugin relies on document.execCommand('copy'), which
  // current Chrome refuses. See form-styles' AGENTS.md.
  document.querySelectorAll('.copy-btn').forEach((button) => {
    button.addEventListener('click', async () => {
      const code = button.closest('section').querySelector('code').textContent
      try {
        await navigator.clipboard.writeText(code)
        button.textContent = 'Copied!'
      } catch {
        button.textContent = 'Press Ctrl+C'
      }
      setTimeout(() => (button.textContent = 'Copy'), 1500)
    })
  })
</script>
</body>
</html>