Navigation Menu - Copy this React, Tailwind Component to your project
Design a responsive navigation menu that adapts seamlessly to various devices. For desktop, create a horizontal menu bar with evenly spaced items and smooth dropdown animations for submenus. On tablet, convert this into a collapsible sidebar that slides in from the left, with a fade in effect for items. For mobile, use a hamburger icon that toggles a full screen overlay menu, featuring a slide in animation and bounce or fade in effects for menu items. Ensure interactive elements have hover (desktop) and tap (mobile) effects, with active items highlighted. Prioritize accessibility by making the menu keyboard navigable and screen reader friendly. Optimize performance for smooth animations and fast load times, using CSS for efficiency. Deliver well commented HTML, CSS, and JavaScript code, including a demo and documentation. Ensure cross browser compatibility and test on various devices to confirm responsiveness and functionality.
