Responsive Navbar - Copy this React, Tailwind Component to your project

<div className="flex flex col ml 40 mt 6 relative md:ml 20 lg:ml 10"> <div className="flex flex row md:flex col lg:flex row"> <div className="mb 10 max w md md:w full lg:max w md"> <h1 className="text 5xl font serif"> {restaurant.name ? restaurant.name : ""} </h1> <div className="flex items center "> <FcRating className="mr 1" /> <p> {restaurant.average_rating ? restaurant.average_rating : "NA"}/5 </p> </div> <p className="text xl"> {restaurant.tags ? restaurant.tags.join(", ") : ""} </p> <p>{`${restaurant.address_line}, ${restaurant.city}`}</p> </div> <div className="absolute right 64 md:right 0 lg:right 64"> <img className="object contain h 48 w 64 md:h 32 md:w 48 lg:h 48 lg:w 64 rounded lg" src={restaurant.logo} /> </div> </div> <div> <h2 className="text 2xl font serif mb 2">Menus</h2> {restaurant?.menu?.map((menuName) => { return <MenuCategory menu={menuName} />; })} </div> </div> Make this JSX better styled and responsive for all the devices