Landing page template

Hero + features + CTA. This is plain HTML + The New CSS.

Preview

Your product headline

A clear, concise description of what your product does and why it matters.

Get started

Features

Fast

Optimized for speed and performance.

Simple

Easy to set up and start using immediately.

Reliable

Built to work consistently across browsers.

Ready to start?

Join thousands of developers building with our product.

Source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Product</title>
  <link rel="stylesheet" href="https://unpkg.com/the-new-css/dist/the-new-css.min.css">
</head>
<body class="bg-gray-50 text-gray-900">

  <!-- Hero -->
  <section class="py-16 md:py-24">
    <div class="container mx-auto px-4 text-center">
      <h1 class="text-4xl md:text-5xl font-extrabold mb-6">
        Your product headline
      </h1>
      <p class="text-lg text-gray-600 max-w-xl mx-auto mb-8">
        A clear, concise description of what your product does
        and why it matters.
      </p>
      <a href="#" class="inline-flex px-6 py-3 bg-blue-600
        text-white font-semibold rounded-lg">
        Get started
      </a>
    </div>
  </section>

  <!-- Features -->
  <section class="py-12 bg-gray-100">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-center mb-8">Features</h2>
      <div class="grid sm:grid-cols-3 gap-6">
        <div class="p-6 bg-gray-50 rounded-lg">
          <h3 class="font-semibold text-lg mb-2">Fast</h3>
          <p class="text-gray-600 text-sm">
            Optimized for speed and performance.
          </p>
        </div>
        <div class="p-6 bg-gray-50 rounded-lg">
          <h3 class="font-semibold text-lg mb-2">Simple</h3>
          <p class="text-gray-600 text-sm">
            Easy to set up and start using immediately.
          </p>
        </div>
        <div class="p-6 bg-gray-50 rounded-lg">
          <h3 class="font-semibold text-lg mb-2">Reliable</h3>
          <p class="text-gray-600 text-sm">
            Built to work consistently across browsers.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-16">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-2xl font-bold mb-4">Ready to start?</h2>
      <p class="text-gray-600 mb-6">
        Join thousands of developers building with our product.
      </p>
      <a href="#" class="inline-flex px-6 py-3 bg-blue-600
        text-white font-semibold rounded-lg">
        Sign up free
      </a>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-8 border-t border-gray-200">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
      &copy; 2026 Your Company. All rights reserved.
    </div>
  </footer>

</body>
</html>