Page sections you can paste

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.

27 sections. Tailwind CSS v4, light and dark, every one checked at desktop and phone widths.

Heroes 5

Centered, Split with image, Photo backdrop, With a form, Announcement and screenshot.

Features 5

Icon grid, Alternating image and text, Tabs, Sticky heading, Bento grid.

How it works 2

Numbered steps, Timeline.

Social proof 4

Testimonial cards, Quote banner, Logo strip, Stats row.

Pricing and FAQ 4

Two tiers, Three tiers, Comparison table, FAQ accordion.

Calls to action and footers 4

Call-to-action band, Newsletter band, Simple footer, Footer with columns.

Content 3

Card grid, Team, Photo gallery.

Before you paste one

  • Tailwind CSS v4. Every snippet uses Tailwind v4 syntax, including the trailing ! (important) on some classes. Your site needs Tailwind v4 set up, which every BootForm template already has.
  • Your brand colour. Snippets use brand-50, brand-500 and brand-600. Define those three in your @theme block, or find and replace brand with a Tailwind colour such as indigo.
  • Why some classes end in !. Pasted into a VitePress page, VitePress's own styles for headings, paragraphs, links, lists and tables beat plain Tailwind classes. The ! goes exactly on the classes that would otherwise lose. Outside VitePress it does no harm.
  • Links and images. Links point at # and images come from Picsum Photos. Swap both for your own. On a VitePress site served from a subpath (GitHub Pages), write an internal link as :href="withBase('/contact')", not href="/contact".
  • Forms. The two sections with a form post to https://f.bootform.com/__YOUR_FORM_ID__. Generate your own form ID at bootform.com/uuidgenerator and claim it before the page goes live, or point action at any other backend.
  • Using Claude Code? The add-section skill in BootForm/site-skills pastes any of these into your page and adapts it for you.