Uploaded April 2022 | Updated September 2026, 16 hours ago

---

In this project, we'll be styling a plain-text React landing page with TailwindCSS to make it look beautiful. I'll be using an AirBNB landing page as an example reference point.

🔗🔗🔗 Links 🔗🔗🔗
👉 Project Code: github.com/pixegami/tailwind-landing-page-demo
👉 TailwindCSS: tailwindcss.com
👉 Creating a new React App: reactjs.org/docs/create-a-new-react-app.html
👉 Unsplash (free images): unsplash.com

🛠 🛠 🛠 My Tools 🛠 🛠 🛠
👉 VSCode: code.visualstudio.com
👉 OhMyZSH: github.com/ohmyzsh/ohmyzsh

📚📚📚 Chapters 📚📚📚

00:00 Introduction and Setup
02:49 Install TailwindCSS
06:05 Text and header styling
11:04 Button styling
14:39 Background color and layout
16:20 Using grid gaps for spacing
18:45 Uppercase and bold text
19:53 Styling the bottom half
26:22 Adding a background image
29:38 Adding background gradients
32:55 Tailwind color palette
33:39 Using a custom font
36:34 Adding a vector (SVG) logo
40:04 Wrapping up


🎨 Photo by @samferrara on Unsplash.

#tailwindcss #reactjs #coding #webdev #tutorial #tech