How To Make Navbar Using React and Tailwind CSS With Light And Dark Mode Step by Step
Subscribe - https://shorturl.at/bisY3
Instagram - / _upcoding
Facebook - https://shorturl.at/BDX18
In this video tutorial we will make a website Navigation bar in React JS and Tailwind CSS.
In this Navbar tutorial we will add website logo, search input box, menu navigation links, and a icon to switch the website from dark mode to light mode and light mode to dark mode.
In this react JS beginners project tutorial we will also use the local storage of web browser to store the user preference of light mode and dark mode.
if your switch to dark mode and close the website, then again open the website then website will be in dark mode.
Timestamps:
00:00 Navbar Demo
00:42 Create new React JS app
01:09 Installing Tailwind CSS
03:52 Create Component Navbar
05:18 Styling Navbar Component
15:40 Applying Light & Dark Mode
25:01 Adding Local Storage for theme
28:19 Final Demo
Keywords:
upcoding
upcoding react projects for begginers
upcoding html and css projects
navigation bar in react js tailwind css
Music Credit:
Song: Sappheiros - Dawn
License: Creative Commons (CC BY 3.0) https://creativecommons.org/licenses/...
https://open.spotify.com/artist/5ZVHX...
Music powered by BreakingCopyright: https://breakingcopyright.com
"Sappheiros - Dawn" is under a Creative Commons (BY 3.0) license:
https://creativecommons.org/licenses/...
https://open.spotify.com/artist/5ZVHX...
Music powered by BreakingCopyright: • 🛀 Calm Music (No Copyright) "Dawn" b...
On this page of the site you can watch the video online Create Navbar In React JS & Tailwind CSS | Light & Dark Mode Navigation Bar Using React JS with a duration of hours minute second in good quality, which was uploaded by the user upCoding 07 June 2024, share the link with friends and acquaintances, this video has already been watched 174 times on youtube and it was liked by 8 viewers. Enjoy your viewing!