Tab Switch

Animated tab
transitions.

A sliding indicator follows the active tab. Content panels fade and rise as you switch — driven by Motion One's WAAPI.

Underline indicator

Everything you need

Webspire is a copy-paste pattern registry for modern landing pages. HTML-first, Tailwind-only, AI-composable. No build step, no configuration.

500+ patterns 143 CSS snippets 42 templates

What's included

  • Hero, Navbar, Footer — all variants
  • Pricing tables with annual toggle
  • Feature grids, testimonials, CTA sections
  • Motion recipes (Motion One + GSAP)

Free to use

All patterns are free to copy, adapt, and use in commercial projects. No attribution required. Webspire is free to use — snippets and patterns are yours.

Common questions

Do I need a build step?
No. All patterns are standalone HTML with Tailwind CDN. Copy, paste, done.
Works with React / Vue / Svelte?
Yes — the HTML structure is framework-agnostic. Convert to JSX or .vue as needed.

Pill indicator

<section class="ws-hero">
  <h1 class="text-5xl font-black">Hello world</h1>
  <a href="#" class="btn-primary">Get started</a>
</section>
---
// Hero.astro
---
<section class="ws-hero">
  <h1 class="text-5xl font-black">Hello world</h1>
  <a href="#" class="btn-primary">Get started</a>
</section>
<template>
  <section class="ws-hero">
    <h1 class="text-5xl font-black">Hello world</h1>
    <a href="#" class="btn-primary">Get started</a>
  </section>
</template>