Material Dashboard Template - Copy this Html, Tailwind Component to your project
Generate a complete, responsive, and modern dashboard template for a form based application with a premium, Google like Material Design aesthetic. The template should have all standard form components and be optimized for both light and dark modes, giving it a professional, app like look. Follow these specific requirements: 1. Dashboard Layout: A collapsible left sidebar with icons and labels for main navigation sections, such as "Dashboard," "Forms," "Reports," "Settings," and "Profile." Ensure the sidebar can collapse to icons only on larger screens and turn into a hamburger menu on mobile. A top menu bar that includes the application title, a centered search bar, a user avatar dropdown, and icons for notifications and settings. Include a toggle switch in the top bar for dark/light mode. Main content area for the form, displayed prominently with appropriate margins and padding. Make the layout fully responsive to adapt seamlessly across desktop, tablet, and mobile screens. On mobile, replace the sidebar with a bottom navigation bar for better accessibility. 2. Form Components (in Content Area): Text inputs with floating labels (e.g., for "Full Name," "Email," "Address") Password input with visibility toggle Date picker with a floating label for "Date of Birth" Time picker for "Preferred Contact Time" Dropdown select for "Country" with search functionality Multi select dropdown for "Skills" (options like HTML, CSS, JavaScript) Radio buttons for "Gender" (options: Male, Female, Other) Checkboxes for multiple options under "Interests" (e.g., Coding, Music, Sports) File upload field with a stylish button for choosing files, and a preview area showing selected files Text area for "Additional Information," including a character counter Range slider for "Experience Level" (range: 1–10) Switch toggle for "Subscribe to newsletter" Color picker for selecting a preferred color theme Numeric input for "Number of Dependents" Phone number input with country code selector URL input for adding a website link Submit and Reset buttons styled according to Material Design principles, with hover and active effects Each form component should have: Floating labels that automatically float when the field is focused or filled. Validation messages that appear under fields when data entry is incorrect (e.g., email format, required fields). Helper text to guide users in filling out complex fields. 3. Dark and Light Mode: Provide a dark mode and a light mode that can be toggled using a switch in the top bar. Ensure both modes have optimized colors for readability and aesthetics, resembling Google’s Material Design theme. Adjust all form elements, buttons, text, and backgrounds accordingly. Implement smooth transitions when switching between dark and light modes, enhancing the premium feel of the template. 4. Mobile Responsiveness and Adaptive Design: Ensure the entire dashboard is mobile friendly with a responsive layout that adjusts based on screen size. On mobile, replace the left sidebar with a bottom navigation bar for sections like "Home," "Forms," and "Settings" to improve usability. Adaptive layout that automatically adjusts padding, font sizes, and button sizes to create a mobile app like experience on smaller screens. 5. Additional Features and Details: Profile dropdown under the user avatar in the top bar with options like "Profile," "Settings," and "Logout." Animations and micro interactions: Add subtle animations for sidebar expansion, button hover effects, field focus states, and dark/light mode transitions. Notifications panel: A side panel or dropdown for displaying recent notifications, if clicked on the notifications icon. Search functionality: Include a search bar with autocomplete functionality in the top menu. Quick Actions Panel on the main dashboard with shortcuts for frequently used actions, such as "Add New Form," "View Submissions," and "Settings." Tooltips: Provide tooltips on form field labels and icons to explain certain options. Loading indicators for form submission and file upload actions to enhance user experience. Generate the entire HTML, CSS, and JavaScript for this dashboard and form layout, using Material Design principles. Ensure that the generated code includes responsive behavior, dark/light mode styling, form validation, and micro interactions to achieve a polished, high quality app template. your last generation not add all form element and not work dark and light mode