Navigation Tab as like Material UI Tabs Component (React, Tailwind CSS)

Hi guys! Today we will make the Navigation Tab Component like Material UI Tabs Component. First of all, should create NavTab Component:

Pass links array with props. Then create a new state for activeTab using useState Hook.

In this case, I used a custom useRouter hook but you can use also useLocation hook. Then we create Tabs Component:

And finally, write handleActiveTab function using useCallback hook and check each time the url of activeTab for the pathname of location with useMemo hook:

Now you can use our custom Tab component. I hope it will help.