Build Your First Landing Page with Next.js + Tailwind (No Design Skills Needed)

Build Your First Landing Page with Next.js + Tailwind (No Design Skills Needed)

Building your first landing page feels like standing in front of a blank canvas. You’ve got the brush, the paint, and a vague idea — but no clue where to start.

Don’t worry. In this guide, we’ll turn that blank canvas into a simple, beautiful page that could be the start of your next SaaS.

We’ll use Next.js for structure and Tailwind CSS for style — like using building blocks that click together perfectly.

---

Step 1: Create a New Next.js Project

Open your terminal and run:

npx create-next-app@latest my-landing-page
cd my-landing-page
npm run dev

Now visit http://localhost:3000 in your browser — you’ll see the default Next.js page. Think of it as an empty room: four walls, no furniture yet.

---

Step 2: Add Tailwind CSS

Tailwind is like having a stylist who hands you ready-made outfits for your website.

Run these commands to install and set it up:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, edit your tailwind.config.js file to include all the pages:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally, open ./styles/globals.css and replace everything with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Restart your dev server with npm run dev. Now your project has a full wardrobe — ready to style anything.

---

Step 3: Clean the Default Page

Open pages/index.js (or page.js if using App Router). Delete everything inside and start fresh:

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 text-center">
      <h1 className="text-4xl font-bold text-gray-800 mb-4">
        Welcome to My First Landing Page
      </h1>
      <p className="text-gray-600 mb-8 max-w-md">
        Launch your next big idea with confidence. This is your space on the internet.
      </p>
      <button className="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
        Get Started
      </button>
    </div>
  );
}

Refresh your page. You’ve just built your first section — the hero. It’s like the shop window for your product.

---

Step 4: Add a Simple Navbar

Let’s add a top navigation bar — your visitors’ map.

Create a new file at components/Navbar.js:

export default function Navbar() {
  return (
    <nav className="w-full flex justify-between items-center p-4 bg-white shadow">
      <h1 className="text-xl font-bold text-blue-600">MyBrand</h1>
      <div className="space-x-4">
        <a href="#" className="text-gray-600 hover:text-blue-600">Home</a>
        <a href="#" className="text-gray-600 hover:text-blue-600">Pricing</a>
        <a href="#" className="text-gray-600 hover:text-blue-600">About</a>
      </div>
    </nav>
  );
}

Then import it in your pages/index.js file:

import Navbar from "../components/Navbar";

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <main className="flex flex-col items-center justify-center text-center py-20">
        <h1 className="text-4xl font-bold text-gray-800 mb-4">
          Welcome to My First Landing Page
        </h1>
        <p className="text-gray-600 mb-8 max-w-md">
          Launch your next big idea with confidence. This is your space on the internet.
        </p>
        <button className="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
          Get Started
        </button>
      </main>
    </div>
  );
}

Now it feels like a real website — navigation, hero, call-to-action. You’ve just built your first product front door.

---

Step 5: Make It Look Good on Mobile

Tailwind’s classes work like magic wands for responsiveness.

Add these tweaks to your text sizes and spacing:

<h1 className="text-3xl md:text-5xl font-bold text-gray-800 mb-4">
  Welcome to My First Landing Page
</h1>
<p className="text-gray-600 mb-8 max-w-md md:max-w-lg">
  Launch your next big idea with confidence. This is your space on the internet.
</p>

Now shrink your browser window — everything gracefully adjusts. It’s like watching your layout dance to different screen sizes.

---

Step 6: Optional — Add DaisyUI for Beautiful Components

Want your page to glow a little more? Install DaisyUI, a Tailwind plugin with pre-styled components:

npm install daisyui

Then in your tailwind.config.js:

plugins: [require("daisyui")],

Now you can replace your button with:

<button className="btn btn-primary">Get Started</button>

It instantly looks cleaner — like switching from sneakers to polished shoes.

---

Step 7: Celebrate — You Just Built Your First Page 🎉

Take a breath. You now have a responsive, styled landing page built from scratch. You wrote code, not copied it. That’s the key difference.

You’ve done what most beginners never do: you shipped something.

---

What’s Next: Build the Rest of the App

If you enjoyed building this and want to go beyond a landing page — I created Zero to SaaS, a 14-day course that takes you from this landing page to a fully functional SaaS with:

• Authentication (email + Google)
• MongoDB database
• Stripe subscriptions
• Deployment on Vercel
• Your own domain

It’s the same stack you just used — just taken to the finish line. You don’t just learn; you launch.

👉 Join Zero to SaaS and turn this landing page into your first real SaaS.