Modern Analytics Dashboard - Copy this Html, Tailwind Component to your project
Design a sleek and modern responsive dashboard for a web application. The dashboard should feature a left aligned sidebar with the following elements: Branding Area: Display the brand logo prominently at the top of the sidebar. Include a small text tagline or name of the brand below the logo. Menu and Submenu: Create a vertical menu with top level menu items. Include collapsible submenus under relevant menu items, with subtle animations for expanding/collapsing. Each menu and submenu item should include an icon on the left (simple, clean, and intuitive icons). Highlight the active menu item with a distinct color or background to indicate selection. Sidebar Styling: Use a primary color (#F36C21 from the logo) for the highlights, such as the active menu background or hover effects. The sidebar background should be the secondary color (#1A478A) for strong contrast. Menu and submenu text should use a neutral color (#FFFFFF for text). Main Dashboard Content: To the right of the sidebar, create a responsive content area. This area should adapt dynamically to screen sizes, featuring widgets, graphs, or cards for displaying analytics or information. Responsiveness: Ensure the sidebar collapses into a compact version (icons only) on smaller screens. The main content area should expand to fill available space when the sidebar is collapsed. Typography and Spacing: Use the font "Roboto" for all text for clarity and modern appeal. Maintain consistent spacing and padding throughout for a clean and professional look. Include soft shadows, smooth transitions, and rounded corners (radius SM) for UI elements like buttons and cards. Prioritize usability and visual appeal suitable for education or professional use.
