Header Navigation - Copy this React, Tailwind Component to your project
Create-a-main-header-navigation-menu-that-includes-a-logo-on-the-left,-which-links-to-the-homepage.-The-header-should-display-a-"Products"-category,-which,-when-clicked,-expands-to-reveal-subcategories-such-as-"Pipes,"-"Casing-Capping,"-"Bends,"-"Junction-Box,"-and-"Deep-Junction."-Clicking-on-"Products"-will-show-a-dropdown-menu-that-includes-these-subcategories.-Each-subcategory,-such-as-"Pipes,"-should-have-further-expandable-sections-like-"PRIME-X,"-"Wire-SHIELD,"-etc.,-and-clicking-on-a-subcategory-will-reveal-different-types-like-"HMS,"-"SMS,"-"LMS,"-and-"MMS."-Selecting-a-type-will-then-show-available-sizes-(e.g.,-"16-x-25,"-"24-x-12").-The-menu-should-have-smooth,-dropdown-style-transitions-for-expanding-and-collapsing-each-level.-The-design-should-be-clean,-modern,-and-responsive,-with-hover-effects-on-categories-and-subcategories-for-better-interactivity.-Ensure-the-navigation-is-structured-in-a-way-that-all-product-related-categories-come-under-the-"Products"-section-in-the-main-header,-with-expandable-submenus-for-further-navigation.-The-menu-should-be-dynamic-and-interactive,-implemented-using-JavaScript-or-a-front-end-framework-like-React.
