Premium Dashboard Layout - Copy this Html, Tailwind Component to your project

Generate a premium, fully responsive dashboard layout using HTML, CSS (including SCSS for organization if possible), and JavaScript. Follow Material Design principles with a sleek, modern design, including the following features: 1. Dashboard Layout: A collapsible sidebar on the left with a smooth sliding animation. The sidebar should have a premium look and include: Main menu items: "Dashboard," "Forms," "Settings," "Reports," and "Profile." Nested sub menu items under main items with collapsible dropdown functionality, such as "New Form," "Form Submissions," and "Templates" under "Forms." Icons and labels for each menu item, with smooth animations for expanding and collapsing sub menus. A responsive hamburger menu for mobile that opens and closes with an animation. A top navigation bar containing: A search bar for quick access. Icons for notifications, user profile, and a dark/light mode toggle button. A main content area centered on the page with a card based layout for forms, designed with a Material Design style. The card should have rounded corners, shadows, and padding for a premium feel. 2. Full Feature Form Design: A complete form with floating labels that automatically float when the field is focused or filled. Include all common form components: Text inputs (e.g., Full Name, Email, Address). A password input with a visibility toggle. Date picker with floating label for selecting dates. Dropdown select with searchable options (e.g., Country). Multi select dropdown for selecting multiple skills (e.g., HTML, CSS, JavaScript). Radio buttons for selecting options (e.g., Gender: Male, Female, Other). Checkboxes for multiple options (e.g., Interests: Coding, Music, Sports). File upload with drag and drop support and preview thumbnail. Text area with a character counter. Range slider to select a numeric range (e.g., Experience level). Toggle switch for options like "Subscribe to newsletter." Buttons: A primary "Submit" button and a secondary "Reset" button. Each form component should have floating labels, validation messages, and subtle animations for a smooth user experience. 3. Dark and Light Mode: A dark and light mode toggle in the top navigation bar. Ensure all components, including the sidebar, form fields, and main content area, adapt to both themes. In dark mode, use dark backgrounds with bright accents for icons and text. Make the dark/light mode transition smooth, using subtle animations to enhance user experience. 4. Mobile Friendly and Responsive Design: Ensure the dashboard layout is fully responsive for desktop, tablet, and mobile screens. On mobile devices: The sidebar should collapse into a hamburger menu that slides in from the left. Use a bottom navigation bar on smaller screens for key sections like "Home," "Forms," and "Settings." All form elements should be touch friendly, with adequate spacing and padding. Ensure dark mode is optimized for mobile, giving it a modern, app like appearance. 5. Additional Features and Interactions: Smooth animations for sidebar toggle, dark/light mode transitions, and form field focus states. Micro interactions for form fields and buttons, adding polish to the interface. A breadcrumb navigation in the top bar to display the current location in the dashboard. A footer (optional) for additional links or information. 6. Sample Data and Placeholder Text: Add realistic placeholder text in form fields, sample labels for menu items, and tooltips for icons to provide context. Generate all code using only HTML, CSS (with optional SCSS for better organization), and JavaScript without any additional frameworks or libraries. Make sure the code is well organized and includes comments for easy customization and understanding.