WORK / MARIGOLDSAMPLE BUILD2026
SaaS marketing template

Marigold

  • React
  • Vite
  • Tailwind CSS
  • Motion

Your idea is solid. The waitlist is live. Now you need a site that actually looks like a real product.

Live preview
Marigold — desktop screenshot
Marigold — mobile screenshot

What's included

Marigold is a single-page SaaS marketing site built with Vite, React, and Tailwind CSS. It covers the full marketing surface in one scroll: hero, an animated bento-grid that showcases the product at a glance, how it works, social-proof stats, pricing, and FAQ.

The animated bento cards are built with Motion and designed to drop in your own app screenshots without touching the layout logic.

It's a clean reference for how to build a polished SaaS frontend with a modern React stack — no SSR, no CMS, just fast static output you can deploy anywhere.

Easy to customize
— everything is styled with utility classes directly in the markup. Open the component in your editor and change whatever you want.
Built with Vite
— fast dev server, instant HMR, and a lean production build with no framework overhead.
Keyboard accessible
— all interactive elements are keyboard-navigable and carry appropriate ARIA attributes.
TypeScript
— fully typed throughout. Swap for JavaScript by removing the type annotations.
Production-ready
— type-checked, linted, and shipped as a static build with a small JavaScript bundle.
Simple to deploy
— static output; deploys to Vercel, Netlify, or any static host.

Screenshots

Marigold — screenshot 1 of 4Marigold — screenshot 2 of 4Marigold — screenshot 3 of 4Marigold — screenshot 4 of 4

The technology

Vite
v8
React
v19
Tailwind CSS
v4
Motion
v12
TypeScript
v6
NEXT PROJECT — 03 / 13
Current
A great API means nothing if the docs are a wall of text. Give developers a reference they'll actually bookmark.
→