How to Style Your React Landing Page with Tailwind CSS
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: https://github.com/pixegami/tailwind-...
👉 TailwindCSS: https://tailwindcss.com/
👉 Creating a new React App: https://reactjs.org/docs/create-a-new...
👉 Unsplash (free images): https://unsplash.com/
🛠 🛠 🛠 My Tools 🛠 🛠 🛠
👉 VSCode: https://code.visualstudio.com/
👉 OhMyZSH: https://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