Pulsegrid — React + Tailwind SaaS Landing Template by Kevinralph TenorioPulsegrid — React + Tailwind SaaS Landing Template | Contra
Pulsegrid — React + Tailwind SaaS Landing TemplateKevinralph Tenorio

Pulsegrid — React + Tailwind SaaS Landing Template

A responsive, highly customizable, SEO-ready landing page template built with React 18, Vite, and Tailwind CSS 3. Ships as a working example (a fictional monitoring product, "Pulsegrid") that you re-skin into your own brand.

Demo

Click here: https://pulsegrid-multi.kevyworks.com/

Quick start

npm install
npm run dev       # http://localhost:5173
npm run build     # production build in /dist
npm run preview   # preview the production build

How to customize (in order)

1. Content — src/config/site.config.js

Every headline, nav link, feature, testimonial, price, and footer link lives in this one file as plain data. Edit the values, save, and the whole site updates. No component file needs to change for a normal re-skin.

2. Brand colors & fonts — src/index.css

All colors are CSS variables at the top of the file, written as R G B triples so Tailwind's opacity modifiers (bg-ink/60) keep working:
--color-ink: 15 20 27;        /* primary text / dark surfaces */
--color-signal: 20 184 166;   /* your main brand accent */
--color-flare: 255 176 32;    /* secondary accent */
Change these six values and every button, badge, and chart line updates across the whole site. A ready-made dark theme is included under the .dark selector — add class="dark" to <html> to try it.
Fonts are set the same way (--font-display, --font-body, --font-mono). Swap the Google Fonts @import at the top of index.css and update the variable names to match.

3. Sections & pages — src/pages/ and src/components/

The homepage (src/pages/Home.jsx) is built from small section components in src/components/ (Hero, Features, Pricing, etc.) — delete a section by removing its line from Home.jsx, or reorder by reordering those lines.
The footer also links to standalone pages, each its own file in src/pages/, all wired up in src/App.jsx via React Router:
PageRouteFileAbout/aboutsrc/pages/About.jsxCareers/careerssrc/pages/Careers.jsxContact/contactsrc/pages/Contact.jsxChangelog/changelogsrc/pages/Changelog.jsxPrivacy/privacysrc/pages/Privacy.jsxTerms/termssrc/pages/Terms.jsx
Each page's copy lives in site.config.js.pages (job openings, changelog entries, contact channels, legal sections) — edit that data rather than the JSX for routine content updates. Header and Footer are shared across every route via src/components/Layout.jsx.
Deploying a multi-page SPA: because routing happens client-side, your host needs to serve index.html for unknown paths (a "SPA fallback" / rewrite rule) so a direct visit to /about doesn't 404. Netlify, Vercel, and Cloudflare Pages do this automatically for Vite projects; for a plain static host, add a rewrite rule sending all paths to /index.html.

4. Logo & favicon

Replace the initial-letter mark in Header.jsx/Footer.jsx with an <img> tag once you have a logo file, and swap public/favicon.svg.

SEO checklist (already wired up)

src/components/SEO.jsx renders title, meta description, canonical URL, Open Graph tags, Twitter Card tags, and an Organization JSON-LD block — all driven from site.config.js.seo. Pass <SEO title="..." description="..." path="/about" /> on any additional page/route to override the defaults.
index.html carries fallback <title>/<meta description> tags for crawlers that read raw HTML before JavaScript runs — keep these roughly in sync with site.config.js.
public/robots.txt and npm run generate-sitemap (writes public/sitemap.xml from the same config) are included. Add routes to the routes array in scripts/generate-sitemap.js if you turn this into a multi-page site.
Before shipping: set seo.siteUrl in site.config.js to your real domain, update the canonical <link> in index.html, and drop a 1200×630 og-image.png into /public.
Semantic structure is already in place: one <h1> in the hero, <h2> per section, a skip-to-content link, and :focus-visible styling on every interactive element.

Accessibility & performance notes

Respects prefers-reduced-motion (animations disable automatically).
Visible keyboard focus ring uses the brand accent, not the browser default.
Mobile nav is fully keyboard- and screen-reader-operable (aria-expanded, aria-controls).
No layout-shifting web fonts beyond the initial load; swap the Google Fonts import for self-hosted fonts if you need to eliminate the third-party request entirely.

Deploying to other frameworks

This template uses plain Vite so it's easy to move:
Next.js: components drop into app/ largely as-is; replace react-helmet-async with Next's built-in metadata API for SEO.
Gatsby: components drop into src/components/ as-is; replace react-helmet-async with gatsby-plugin-react-helmet and generate sitemap.xml/robots.txt via gatsby-plugin-sitemap.

License

See LICENSE.md. In short: use the Template in unlimited personal or client end products, but don't resell or redistribute the Template's source files themselves as a standalone product.
Note: This is a digital download. No physical product will be shipped. Images, company names, and sample content shown in the preview are for demonstration only.
Get it for$5.99
Buy
Tags
React
Tailwind CSS
Landing Page
Templates
SaaS
Product created by
Kevinralph Tenorio Dumaguete, Philippines
1
Followers
Kevinralph's other products
Nexa — Responsive Marketing Landing Page Template
$5.99
Signalpath — Marketing Landing Page Template
$5.99
Pulsegrid — React + Tailwind SaaS Landing TemplateKevinralph Tenorio
Get it for$5.99
Buy
Tags
React
Tailwind CSS
Landing Page
Templates
SaaS

Pulsegrid — React + Tailwind SaaS Landing Template

A responsive, highly customizable, SEO-ready landing page template built with React 18, Vite, and Tailwind CSS 3. Ships as a working example (a fictional monitoring product, "Pulsegrid") that you re-skin into your own brand.

Demo

Click here: https://pulsegrid-multi.kevyworks.com/

Quick start

npm install
npm run dev       # http://localhost:5173
npm run build     # production build in /dist
npm run preview   # preview the production build

How to customize (in order)

1. Content — src/config/site.config.js

Every headline, nav link, feature, testimonial, price, and footer link lives in this one file as plain data. Edit the values, save, and the whole site updates. No component file needs to change for a normal re-skin.

2. Brand colors & fonts — src/index.css

All colors are CSS variables at the top of the file, written as R G B triples so Tailwind's opacity modifiers (bg-ink/60) keep working:
--color-ink: 15 20 27;        /* primary text / dark surfaces */
--color-signal: 20 184 166;   /* your main brand accent */
--color-flare: 255 176 32;    /* secondary accent */
Change these six values and every button, badge, and chart line updates across the whole site. A ready-made dark theme is included under the .dark selector — add class="dark" to <html> to try it.
Fonts are set the same way (--font-display, --font-body, --font-mono). Swap the Google Fonts @import at the top of index.css and update the variable names to match.

3. Sections & pages — src/pages/ and src/components/

The homepage (src/pages/Home.jsx) is built from small section components in src/components/ (Hero, Features, Pricing, etc.) — delete a section by removing its line from Home.jsx, or reorder by reordering those lines.
The footer also links to standalone pages, each its own file in src/pages/, all wired up in src/App.jsx via React Router:
PageRouteFileAbout/aboutsrc/pages/About.jsxCareers/careerssrc/pages/Careers.jsxContact/contactsrc/pages/Contact.jsxChangelog/changelogsrc/pages/Changelog.jsxPrivacy/privacysrc/pages/Privacy.jsxTerms/termssrc/pages/Terms.jsx
Each page's copy lives in site.config.js.pages (job openings, changelog entries, contact channels, legal sections) — edit that data rather than the JSX for routine content updates. Header and Footer are shared across every route via src/components/Layout.jsx.
Deploying a multi-page SPA: because routing happens client-side, your host needs to serve index.html for unknown paths (a "SPA fallback" / rewrite rule) so a direct visit to /about doesn't 404. Netlify, Vercel, and Cloudflare Pages do this automatically for Vite projects; for a plain static host, add a rewrite rule sending all paths to /index.html.

4. Logo & favicon

Replace the initial-letter mark in Header.jsx/Footer.jsx with an <img> tag once you have a logo file, and swap public/favicon.svg.

SEO checklist (already wired up)

src/components/SEO.jsx renders title, meta description, canonical URL, Open Graph tags, Twitter Card tags, and an Organization JSON-LD block — all driven from site.config.js.seo. Pass <SEO title="..." description="..." path="/about" /> on any additional page/route to override the defaults.
index.html carries fallback <title>/<meta description> tags for crawlers that read raw HTML before JavaScript runs — keep these roughly in sync with site.config.js.
public/robots.txt and npm run generate-sitemap (writes public/sitemap.xml from the same config) are included. Add routes to the routes array in scripts/generate-sitemap.js if you turn this into a multi-page site.
Before shipping: set seo.siteUrl in site.config.js to your real domain, update the canonical <link> in index.html, and drop a 1200×630 og-image.png into /public.
Semantic structure is already in place: one <h1> in the hero, <h2> per section, a skip-to-content link, and :focus-visible styling on every interactive element.

Accessibility & performance notes

Respects prefers-reduced-motion (animations disable automatically).
Visible keyboard focus ring uses the brand accent, not the browser default.
Mobile nav is fully keyboard- and screen-reader-operable (aria-expanded, aria-controls).
No layout-shifting web fonts beyond the initial load; swap the Google Fonts import for self-hosted fonts if you need to eliminate the third-party request entirely.

Deploying to other frameworks

This template uses plain Vite so it's easy to move:
Next.js: components drop into app/ largely as-is; replace react-helmet-async with Next's built-in metadata API for SEO.
Gatsby: components drop into src/components/ as-is; replace react-helmet-async with gatsby-plugin-react-helmet and generate sitemap.xml/robots.txt via gatsby-plugin-sitemap.

License

See LICENSE.md. In short: use the Template in unlimited personal or client end products, but don't resell or redistribute the Template's source files themselves as a standalone product.
Note: This is a digital download. No physical product will be shipped. Images, company names, and sample content shown in the preview are for demonstration only.
Kevinralph's other products
Nexa — Responsive Marketing Landing Page Template
$5.99
Signalpath — Marketing Landing Page Template
$5.99
$5.99
Buy