Back to Browse

Light & Dark Mode Navigation Bar

666 views
Jun 7, 2024
29:14

How To Make Navbar Using React and Tailwind CSS With Light And Dark Mode Step by Step Subscribe - https://shorturl.at/bisY3 Instagram - https://www.instagram.com/_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/by/3.0 https://open.spotify.com/artist/5ZVHXQZAIn9WJXvy6qn9K0 "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:https://www.youtube.com/watch?v=pWAP7fIwGnI&list=PLfP6i5T0-DkKePtqSld0Dis0p14dRFZvm

Download

1 formats

Video Formats

360pmp441.0 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Light & Dark Mode Navigation Bar | NatokHD