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

Create a professional, premium quality, responsive dashboard using HTML, Tailwind CSS, and JavaScript. Follow these guidelines for a polished and attractive design: 1. Layout and Structure Sidebar (Left): A collapsible sidebar with smooth slide in/out animations. Include icons and text labels for main sections such as "Dashboard," "Analytics," "Users," "Settings," "Reports," and "Support." Each main section should support nested sub menu items with collapsible dropdowns. Hover effects and tooltips for sidebar items, with clear color transitions for both dark and light modes. For mobile, the sidebar should automatically collapse into a hamburger menu at the top, opening with an animated overlay. Top Navigation Bar: Include a search bar with placeholder text for quick access. Add icons for notifications, user profile, settings, and a dark/light mode toggle. Display the user's profile picture and name on the right side, with a dropdown menu for profile settings, logout, etc. Make sure the top bar remains fixed while scrolling. Main Content Area: A responsive grid layout for content cards, displaying statistics, charts, or other information. Use rounded corners, shadows, and card hover animations for a modern look. Each card should have an elegant floating animation on hover, with a quick color transition. A breadcrumb navigation at the top of the main content area to show the current page location. Include example cards for analytics such as "Sales," "User Growth," "Revenue," and "Activity." 2. Form Section A form card for data input, designed with Material Design style floating labels that automatically animate to the top on focus. Form components should include: Text inputs, email input, password field with visibility toggle. Dropdown selects with searchable options. Radio buttons and checkboxes for multiple options. A file upload field with drag and drop functionality and preview thumbnails. Switch toggle for settings (e.g., enabling notifications). A primary submit button with hover and click animations. Validation messages and icons should be displayed dynamically and with subtle animations. 3. Dark and Light Mode Implement a dark/light mode toggle that updates the colors of the entire dashboard, including sidebar, top bar, cards, and form components. In dark mode, use darker background colors with bright accent colors and light text, providing a rich contrast. Smooth transition animations between dark and light modes, enhancing the visual experience. 4. Mobile Friendly and Responsive Design Ensure the dashboard layout is fully responsive for desktop, tablet, and mobile screens. For mobile screens: The sidebar should collapse into a hamburger menu that overlays the main content. The top bar and main content should rearrange to fit smaller screens, maintaining functionality and readability. Form fields and buttons should be touch friendly, with adequate spacing and padding. 5. Animations and Transitions Use smooth animations for sidebar collapse/expand, card hover effects, dark/light mode toggle, and form field interactions. Micro interactions for hover and click effects on buttons, icons, and menu items. Use Tailwind CSS utility classes for animations like transition, ease in out, and duration 300 for smooth effects. 6. Tailwind CSS and JavaScript Use Tailwind CSS for all styling, including responsive design, colors, and layout. Use JavaScript for interactive elements such as the sidebar toggle, dropdown menus, dark/light mode toggle, and animations. Organize the HTML structure for readability and include Tailwind utility classes directly in HTML. Avoid using additional libraries or frameworks. Generate clean, well organized HTML, Tailwind CSS, and JavaScript code. Ensure that the final layout looks like a premium dashboard with a highly professional finish, responsive layout, and smooth animations.