Responsive Dashboard Layout - Copy this Html, Tailwind Component to your project
can-you-make-this-code-responsive-in-mobile-view-like-it-will-be-toggle-or-hambuger-once-in-a-mobile-view.-this-is-my-current-code:-<main-class="h-full-w-full-overflow-y-auto">-<div-class="container-px-3-sm:px-5-mx-auto-grid">-<div-class="p-3-sm:ml-64-dark:bg-gray-900-mt-14">-<div-class="m-5-space-y-6-sm:space-y-8-lg:grid-lg:grid-cols-1-xl:grid-cols-3">-<!---Settings-Overview-Card--->-<div-class="col-span-2-p-4-bg-white-rounded-lg-shadow-md-dark:bg-gray-800">-<h2-class="my-2-text-xl-font-semibold-text-gray-700-dark:text-gray-200">Settings</h2>-</div>-<div-class="flex-flex-col-md:flex-row-gap-3-col-span-2">-<!---Sidebar-Tabs--->-<aside-class="bg-gray-200-py-4-px-3-dark:bg-gray-800-rounded-md-flex-shrink-0">-<ul-class="list-none-text-sm-space-y-2">-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-white-bg-inherit"-data-tab-target="#enrollment"-role="tab"-aria-selected="true"-aria-controls="enrollment">-Enrollment-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#student"-role="tab"-aria-selected="false"-aria-controls="student">-Add-Students-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#ins"-role="tab"-aria-selected="false"-aria-controls="ins">-Add-Instructors-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#subj"-role="tab"-aria-selected="false"-aria-controls="subj">-Add-Subjects-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#subjcode"-role="tab"-aria-selected="false"-aria-controls="subjcode">-Add-Subject-Code-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#sched"-role="tab"-aria-selected="false"-aria-controls="sched">-Add-Schedule-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#room"-role="tab"-aria-selected="false"-aria-controls="room">-Add-Room-</a>-</li>-<li>-<a-class="tab-block-py-2-px-3-text-sm-transition-all-ease-in-out-border-0-rounded-lg-cursor-pointer-font-semibold-text-gray-600-dark:text-gray-600-bg-inherit"-data-tab-target="#back"-role="tab"-aria-selected="false"-aria-controls="back">-Backup-&-Restore-</a>-</li>-</ul>-</aside>-<!---Tab-Content--->-<div-class="p-6-bg-white-rounded-md-shadow-md-dark:bg-gray-800-h-screen">-<div-data-tab-content=""-class="px-2">-<div-id="enrollment"-class="tab-content"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Enrollment</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="student"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Students</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="ins"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Instructors</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="subj"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Subjects</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="subjcode"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Subject-Code</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="sched"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Schedule</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="room"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Add-Room</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-<div-id="back"-class="tab-content-hidden-opacity-0"-role="tabpanel">-<h2-class="font-semibold-text-gray-600-dark:text-gray-300">Backup-and-Restore</h2>-<br>-<p-class="text-gray-600-dark:text-gray-300-font-light">-Lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit.-Ipsa-voluptas-repellat-sapiente-ipsam-assumenda,-doloribus,-architecto-eos-cupiditate-tempore-quos-amet-eveniet-rerum-at?-Totam-mollitia-vitae-aut-porro-dicta.-</p>-</div>-</div>-</div>-</div>-</div>-</div>-</div>-</main>
