Tailwind CSS Page Template

Tailwind CSS Page Template

The real value of a page template isn't "copy and paste" — it's seeing a proven combination of modules. This Tailwind CSS template includes navigation, a hero, feature cards, a pricing table, and a footer, all assembled from atomic utility classes. Every part is easy to tweak, and nothing collapses on a phone screen. Use it as a starting point: swap the copy, change the color, and you have a respectable landing page in minutes.

Reference: Tailwind CSS docs https://tailwindcss.com/docs

Adding Tailwind

Decide how to include Tailwind first. Two common options:

<!-- CDN (fast prototyping, fine for throwaway pages) -->
<script src="https://cdn.tailwindcss.com"></script>

# npm (recommended for production)
npm install -D tailwindcss @tailwindcss/cli
npx @tailwindcss/cli init

The CDN approach needs zero configuration and works straight in the browser — great for demos and prototypes. For production, build with npm so the output only contains the classes you actually use: smaller and faster. The module code below works either way.

Navbar

<header class="sticky top-0 bg-white/80 backdrop-blur border-b border-gray-100">
  <nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
    <a href="#" class="text-xl font-bold text-gray-900">Logo</a>
    <div class="hidden md:flex gap-8 text-gray-600">
      <a href="#" class="hover:text-gray-900">Features</a>
      <a href="#" class="hover:text-gray-900">Pricing</a>
      <a href="#" class="hover:text-gray-900">Docs</a>
    </div>
    <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium">Sign in</a>
  </nav>
</header>

sticky top-0 pins the navbar while scrolling, and bg-white/80 backdrop-blur creates a frosted-glass effect that keeps content readable underneath. The middle links hide on mobile (hidden md:flex) so small screens stay uncluttered.

Hero section

<section class="bg-gradient-to-br from-indigo-50 to-white py-20">
  <div class="max-w-6xl mx-auto px-4 text-center">
    <h1 class="text-5xl font-bold text-gray-900 mb-6">
      Build your <span class="text-indigo-600">next product</span>
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
      Launch a professional website quickly. Pick a plan and start building today.
    </p>
    <div class="flex gap-4 justify-center">
      <a href="#" class="bg-indigo-600 text-white px-8 py-3 rounded-lg
        hover:bg-indigo-700 transition font-medium">
        Get started free
      </a>
      <a href="#" class="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg
        hover:border-gray-400 transition font-medium">
        Learn more
      </a>
    </div>
  </div>
</section>

The hero is the first thing visitors see. bg-gradient-to-br from-indigo-50 to-white creates a soft gradient backdrop, text-5xl gives the headline visual weight, and the two buttons set a clear primary/secondary hierarchy: the filled button drives conversion, the outlined one handles "learn more." max-w-6xl mx-auto keeps content centered and readable on wide screens.

Feature card grid

<section class="py-16 bg-white">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Core features</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Lightning fast</h3>
        <p class="text-gray-600">Global CDN acceleration keeps your site loading in an instant.</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2
            0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Secure & reliable</h3>
        <p class="text-gray-600">Built-in WAF and DDoS protection guard your website.</p>
      </div>
      <div class="p-6 rounded-xl border border-gray-100 hover:shadow-lg transition">
        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor"
            viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round"
            stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112
            2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591
            3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">99.9% uptime</h3>
        <p class="text-gray-600">Enterprise-grade SLA keeps your business online.</p>
      </div>
    </div>
  </div>
</section>

Feature cards are the most common landing-page module. grid md:grid-cols-3 renders three columns on desktop and stacks to a single column on small screens; each card gets subtle feedback from hover:shadow-lg transition. Icons are inline SVGs tinted with text-indigo-600, so you don't need an icon library. Add or remove features by duplicating or deleting one card <div>.

Pricing table

<section class="py-16 bg-gray-50">
  <div class="max-w-6xl mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-12">Choose a plan</h2>
    <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">Starter</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$9<small class="text-lg text-gray-500">/mo</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 1 website</li>
          <li class="flex items-center gap-2">✓ 10GB storage</li>
          <li class="flex items-center gap-2">✓ Free SSL</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">Choose plan</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center ring-2 ring-indigo-600">
        <span class="text-xs bg-indigo-600 text-white px-3 py-1 rounded-full">Recommended</span>
        <h3 class="text-xl font-semibold mt-2 mb-2">Pro</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$29<small class="text-lg text-gray-500">/mo</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ 10 websites</li>
          <li class="flex items-center gap-2">✓ 100GB storage</li>
          <li class="flex items-center gap-2">✓ CDN acceleration</li>
        </ul>
        <a href="#" class="block w-full bg-indigo-600 text-white py-2 rounded-lg
          hover:bg-indigo-700 transition">Choose plan</a>
      </div>
      <div class="bg-white p-8 rounded-xl shadow-sm text-center">
        <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
        <p class="text-4xl font-bold text-indigo-600 mb-6">$99<small class="text-lg text-gray-500">/mo</small></p>
        <ul class="text-left space-y-3 mb-8">
          <li class="flex items-center gap-2">✓ Unlimited websites</li>
          <li class="flex items-center gap-2">✓ 1TB storage</li>
          <li class="flex items-center gap-2">✓ Priority support</li>
        </ul>
        <a href="#" class="block w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg
          hover:bg-indigo-50 transition">Contact sales</a>
      </div>
    </div>
  </div>
</section>

The pricing table lays out Starter / Pro / Enterprise side by side, with the Pro tier highlighted by ring-2 ring-indigo-600 and a "Recommended" badge. The CTAs are deliberately differentiated — Pro gets a filled button while the other two are outlined — nudging visitors toward the middle plan. max-w-4xl mx-auto narrows the table so the three columns don't stretch too wide.

Footer

<footer class="bg-gray-50 border-t border-gray-100 py-12">
  <div class="max-w-6xl mx-auto px-4 grid md:grid-cols-4 gap-8">
    <div class="md:col-span-2">
      <h3 class="font-bold text-gray-900 mb-2">Product name</h3>
      <p class="text-gray-500 text-sm">One sentence about what your product does.</p>
    </div>
    <div>
      <h4 class="font-medium text-gray-900 mb-3">Product</h4>
      <ul class="space-y-2 text-sm text-gray-500">
        <li><a href="#" class="hover:text-gray-900">Features</a></li>
        <li><a href="#" class="hover:text-gray-900">Pricing</a></li>
      </ul>
    </div>
    <div>
      <h4 class="font-medium text-gray-900 mb-3">Company</h4>
      <ul class="space-y-2 text-sm text-gray-500">
        <li><a href="#" class="hover:text-gray-900">About</a></li>
        <li><a href="#" class="hover:text-gray-900">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="max-w-6xl mx-auto px-4 mt-8 pt-6 border-t border-gray-100 text-sm text-gray-400">
    © 2026 Product name. All rights reserved.
  </div>
</footer>

Combining the modules

These modules combine freely by page type. A landing page usually runs the full chain — navbar → hero → feature cards → pricing → footer; a SaaS product page can get by with navbar + feature cards + footer; a campaign page leads with hero + pricing. When combining, keep the spacing rhythm consistent: use the same py-16 or py-20 between blocks, keep card-internal spacing on one scale, and the page won't look cluttered. For color, stick to one primary plus one neutral; Tailwind's full indigo scale drops straight onto any brand color.

Usage

1. Copy the HTML module you need into your project file
2. Make sure Tailwind CSS is loaded (CDN or npm)
3. Replace the text content and links
4. Swap indigo for your brand color

Customization tips

• Change the theme color: find-and-replace indigo with your brand color, keeping the shade steps (indigo-50/100/600/700) mapped 1:1.
• Adjust spacing: utilities like gap-8, py-16, and mb-12 scale on a 4px base, so tweaks feel intuitive.
• Responsive breakpoints: md: applies at 768px and up; use sm: (640px) to stack earlier.

FAQ

• Why isn't my style applied? Check that Tailwind is actually loaded, and that you're building for production (unused classes aren't generated).
• Can I use this commercially? Yes. These modules are built on Tailwind, which is MIT-licensed.
• Do I need a JavaScript framework? No. Plain HTML + Tailwind works, and the markup doubles as a starting point for Vue/React components.
• How do I change font sizes? Text utilities come in preset steps (text-sm, text-base, text-xl); just swap the class name.

16IDC Takeaway

A good template isn't a pile of components — it's modules with clear hierarchy and a consistent spacing system. Treat this template as a skeleton, reorder and combine the modules to fit your product logic, and you'll quickly have a page component library of your own.