Navigation Menu - Copy this React, Tailwind Component to your project

<NavigationMenu className="p 2 flex justify content between"> <NavigationMenuList> <NavigationMenuItem> <Icons.logo className="h 6 w 6" /> </NavigationMenuItem> <NavigationMenuItem> <p className="font sans font bold mr 4">learnsmart</p> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger className="focus:bg transparent group hover:bg transparent hover:text foreground/80 text foreground/60 font sans font light">About</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid gap 3 p 6 md:w [400px] lg:w [500px] lg:grid cols [.75fr_1fr]"> <li className="row span 3"> <NavigationMenuLink asChild> <a className="flex h full w full select none flex col justify end rounded md bg gradient to b from muted/50 to muted p 6 no underline outline none focus:shadow md" href="/" > <Icons.logo className="h 6 w 6" /> <div className="mb 2 mt 4 text lg font medium"> Learnsmart </div> <p className="text sm leading tight text muted foreground"> Designed to help students study their courses more effectively by intending to improve their grade output with its learning guide. </p> </a> </NavigationMenuLink> </li> <ListItem href="" title="Check out our GitHub page"> Check out learnsmart's development journey. </ListItem> <ListItem href="" title="Team"> Get to know us. </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger className="focus:bg transparent group hover:bg transparent hover:text foreground/80 text foreground/60 font sans font light">Documents</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w [400px] gap 3 p 4 md:w [500px] md:grid cols 2 lg:w [600px] "> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> </NavigationMenuList> <NavigationMenuList> <NavigationMenuItem> <Searchbar /> </NavigationMenuItem> <NavigationMenuItem> <ModeToggle /> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> separate the navigation menu lists at both ends