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.