Responsive Navigation Bar - Copy this Html, Tailwind Component to your project

I need a responsive navigation bar that works across mobile, tablet, and PC screens. The bar should include buttons for 'Home', 'About Us', 'Contact Us', and 'Shop'. It should have rounded edges and animate differently depending on the device: On mobile screens: The navigation bar should initially be hidden and slide up from the bottom when triggered, with smooth animation. On tablet screens: The bar should be similar to mobile but adapted for tablet sizes, with a possibly slightly larger touch area. On PC screens: The navigation bar should be positioned at the top of the screen and slide down into view from the top, with a smooth animation. The navigation bar should have a round style with rounded corners and a subtle hover effect on the buttons.