Header - Copy this React, Tailwind Component to your project
Create a header component for Progressively enhanced infinite horizontal scroll where items within scroll are game cards with height:width ratio of 2:10. this header stays fixed at the top. Component Description: Component Name: Game Menu Header Functionality and Layout: Sticky Header: The header component should be fixed at the top of the viewport at all times, ensuring it remains visible during user interaction and scrolling. Account Balance Display (Right Side): Place an account balance display on the right side of the header. This display should include: The current balance amount in a prominent font. A token icon representative of the game's currency next to the balance. The token symbol (e.g., "GOLD", "COINS") next to the amount, ensuring it is clear what currency is shown. Auto-Scrolling Game Cards (Left Side): On the left side of the header, implement a horizontally auto-scrolling carousel of game cards. These cards should: Scroll automatically from right to left. Have a ratio of height to width of 2:10, making them wide and short. Be continuously scrolling without user input but pause on hover to allow users to click. Be clickable, leading to different parts of the game or providing game-related information upon click. Interactivity: Ensure that the game cards are interactive, with visual feedback when hovered over or clicked (e.g., change in border color, slight elevation). The account balance section should also be interactive, perhaps displaying more detailed information on hover or click. Styling Details: Overall Aesthetics: Use a color scheme that fits with the game’s theme, with darker tones for the header to distinguish it from the rest of the page. Typography: Utilize clear, readable fonts that align with the game’s visual style. Important information like the account balance should be particularly prominent. Responsiveness: The header should be fully responsive, adapting to different screen sizes while maintaining its layout and functionality. Accessibility: Include proper ARIA labels, especially for interactive elements like clickable game cards and the account balance area.
