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...
Nesta página do site você pode assistir ao vídeo on-line Create Navbar In React JS & Tailwind CSS | Light & Dark Mode Navigation Bar Using React JS duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário upCoding 07 Junho 2024, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 174 vezes e gostou 8 espectadores. Boa visualização!