Container

<div>
    <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
    <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
        <!--
      Off-canvas menu backdrop, show/hide based on off-canvas menu state.

      Entering: "transition-opacity ease-linear duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "transition-opacity ease-linear duration-300"
        From: "opacity-100"
        To: "opacity-0"
    -->
        <div class="fixed inset-0 bg-tertiary-600 bg-opacity-75"></div>

        <div class="fixed inset-0 z-40 flex">
            <!--
        Off-canvas menu, show/hide based on off-canvas menu state.

        Entering: "transition ease-in-out duration-300 transform"
          From: "-translate-x-full"
          To: "translate-x-0"
        Leaving: "transition ease-in-out duration-300 transform"
          From: "translate-x-0"
          To: "-translate-x-full"
      -->
            <div class="relative flex w-full max-w-xs flex-1 flex-col bg-tertiary-50 p-lgSpace">
                <!--
          Close button, show/hide based on off-canvas menu state.

          Entering: "ease-in-out duration-300"
            From: "opacity-0"
            To: "opacity-100"
          Leaving: "ease-in-out duration-300"
            From: "opacity-100"
            To: "opacity-0"
        -->
                <div class="absolute top-0 right-0 -mr-12 pt-xsSpace">
                    <button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                        <span class="sr-only">Close sidebar</span>
                        <!-- Heroicon name: outline/x-mark -->
                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="flex flex-shrink-0 items-center">

                </div>

                <div class="mt-lgSpace h-0 flex-1 overflow-y-auto">
                    <nav class="">

                    </nav>
                </div>
            </div>

            <div class="w-14 flex-shrink-0" aria-hidden="true">
                <!-- Dummy element to force sidebar to shrink to fit close icon -->
            </div>
        </div>
    </div>

    <!-- Static sidebar for desktop -->
    <div class="hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col">

        <div class="flex min-h-0 flex-1 flex-col bg-tertiary-50 border-r">
            <div class="flex flex-1 flex-col overflow-y-auto p-lgSpace">
                <div class="flex flex-shrink-0 items-center mb-lgSpace">

                </div>

                <!-- Sidebar component, swap this element with another sidebar if you like -->
                <nav class="flex-1 space-y-smSpace" aria-label="Sidebar">
                    Side Content
                </nav>
            </div>
        </div>
    </div>

    <div class="flex flex-1 flex-col md:pl-lgSpace4">

        <main class="flex-1">
            <div class="space-y-lgSpace">
                <div class="mx-auto max-w-7xl px-mdSpace sm:px-lgSpace md:px-xlSpace">

                </div>

                <div class="mx-auto max-w-7xl px-mdSpace sm:px-lgSpace md:px-xlSpace">
                    <div class="space-y-xlSpace">
                        Main Content
                    </div>
                </div>
            </div>
        </main>

    </div>
</div>