Dashboard Layout Component - Copy this Html, Tailwind Component to your project
1.-General-Layout-Header:-Contains-the-logo-on-the-left-and-user-profile-(with-avatar,-dropdown-for-account-settings,-and-logout)-on-the-right.-Optionally,-include-a-search-bar-or-quick-access-buttons-(e.g.,-notifications).-Stick-to-a-clean-background-color-(e.g.,-white-or-light-gray)-with-subtle-shadows.-Sidebar:-Positioned-on-the-left-side,-containing:-Dashboard-(Home).-Plans-&-Pricing.-Active-Websites.-Quota-Management.-Settings.-Help/Support.-Use-a-collapsible-design-for-better-responsiveness.-Highlight-the-active-page-with-a-bold-accent-or-indicator-line.-Main-Content:-Organized-into-sections-with-cards-and-tabs-for-easy-navigation.-A-responsive-grid-layout-for-sections-like-"Subscription-Details,"-"Active-Websites,"-and-"Quota-Usage."-Footer:-Simple,-fixed-at-the-bottom-of-the-page.-Include-links-like-Terms-of-Service,-Privacy-Policy,-and-Contact-Us.-2.-Content-Sections-A.-Dashboard-Overview-A-card-based-UI-showing:-Current-Plan:-Name-of-the-plan,-features,-price,-and-status-(active/inactive).-A-CTA-button:-"Change-Plan"-or-"Upgrade."-Quota-Usage:-A-progress-bar-showing-%-used-(e.g.,-"80%-of-100GB-used").-Option-to-"Buy-More-Quota."-Active-Websites:-Count-of-active-websites-with-links-to-details.-Expiry-Date:-Clearly-display-the-license-expiration-date.-Option-to-"Renew-License."-B.-Active-Websites-A-table-or-grid-view-with-the-following-columns:-Website-Name/URL.-Status-(Active/Inactive).-Added-On-(date).-Actions-(Edit,-Remove).-C.-Plan-Management-Display-all-available-plans-in-a-pricing-table:-Show-features,-monthly/yearly-pricing,-and-a-"Select-Plan"-button.-Highlight-the-user's-current-plan-with-a-badge-("Current-Plan").-Include-a-toggle-for-Monthly/Yearly-billing-options.-D.-Settings-User-can:-Update-profile-information-(name,-email,-password).-Manage-notifications.-View-payment-history-and-invoices.-E.-Help-&-Support-A-simple-form-for-raising-tickets-or-accessing-FAQs.-3.-Responsive-Design-Mobile-View:-Collapsible-sidebar-replaced-by-a-hamburger-menu.-Dashboard-cards-stack-vertically.-Tables-(like-Active-Websites)-use-scrollable-containers.-Tablet-View:-Sidebar-partially-collapses,-showing-only-icons.-Content-adjusts-to-a-2-column-layout.-Desktop-View:-Full-width-layout-with-3-4-columns-for-cards-and-detailed-tables.-4.-Visual-Enhancements-Typography:-Use-clear,-modern-fonts-(e.g.,-"Roboto"-or-"Poppins").-Define-clear-text-hierarchy-with-bold-headers-and-subtle-body-text.-Color-Palette:-Use-a-neutral-base-color-(light-gray-or-white).-Add-an-accent-color-(e.g.,-blue,-green,-or-purple)-for-interactive-elements-like-buttons,-links,-and-highlights.-Use-contrasting-colors-for-error-or-warning-messages.-Buttons-&-Interactivity:-Add-hover-effects-(e.g.,-slight-shadow-or-color-change).-Use-icons-with-text-for-better-clarity-(e.g.,-a-"+"-icon-next-to-"Add-Website").-Animations:-Subtle-transitions-for-hover-states,-dropdowns,-and-modals.-Progress-bars-and-loaders-for-actions-like-changing-plans-or-fetching-data.
