How I Built My First Website Using React & TailwindCSS

Dhrubaraj Pati — Sun, 12 Oct 2025 19:55:02 +0000

The best way to learn web development is to build something real.

Hey everyone 👋
In this post, I’ll share how I built my very first website using React and TailwindCSS from setup to deployment. If you’re a beginner wondering where to start, this guide will help you get there faster.

Why I Chose React + TailwindCSS

When I started learning web development, I wanted something modern, fast, and flexible.
After trying out plain HTML/CSS and Bootstrap, I switched to React for dynamic components and TailwindCSS for utility-first styling.

React helped me organize my project into reusable components, and Tailwind gave me full design control — without writing tons of CSS.

Step 1: Setting Up the Project

I started with Vite, a fast build tool for React projects.

npm create vite@latest my-portfolio --template react
cd my-portfolio
npm install

Then I installed TailwindCSS:

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

Added this to tailwind.config.js:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],

And finally, imported Tailwind into my index.css:

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

The setup was done!

Step 2: Designing the Layout

I wanted a clean and responsive layout with:

A beautiful navbar
A hero section with my introduction
A projects section
A contact form

Using Tailwind, I could easily style everything like this:

<div className="bg-gray-900 text-white min-h-screen">
  <nav className="p-6 flex justify-between items-center">
    <h1 className="text-2xl font-bold text-cyan-400">My Portfolio</h1>
    <ul className="flex space-x-6">
      <li>Home</li>
      <li>Projects</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

No custom CSS, just clean utility classes

Step 3: Adding Components

I split the site into reusable components:

Navbar.jsx
Hero.jsx
Projects.jsx
Contact.jsx
Footer.jsx

Each component was small and easy to manage.
Example: my Hero section used a simple animation with Framer Motion to make it lively.

Step 4: Deploying to Netlify

Deployment was super easy:

Pushed the code to GitHub
Logged into Netlify
Linked my repo
Done 🎉

My site was live in seconds!

What I Learned

How components work in React
How to use Tailwind’s utility classes effectively
How to structure a responsive website
How easy it is to deploy with Netlify

Most importantly, I learned that you don’t need to know everything before starting.
Just start building and you’ll figure things out along the way.

Key Takeaways

Start small — one page at a time
Learn by building, not by watching tutorials endlessly
Use modern tools (Vite, Tailwind, Netlify) to save time
Keep improving your UI — small tweaks make a big difference

Final Thoughts

Building my first website was one of the most rewarding experiences.
Now, every new project feels easier because I know the workflow.

If you’re thinking of starting — don’t wait.
Clone a starter template, tweak it, break it, rebuild it — and you’ll learn faster than you think.

DEV Community: Dhrubaraj Pati