<script src="https://cdn.tailwindcss.com"></script>

<script type="text/javascript">
  tailwind.config = {
    theme: {
      extend: {
        gridTemplateColumns: {
          pancake: 'auto 1fr auto',
        },
        gridTemplateRows: {
          pancake: 'auto 1fr auto',
        }
      }
    }
  }
</script>

<div class="h-screen w-full grid grid-cols-pancake grid-rows-pancake">
    <header class="bg-pink-200 col-span-3 p-6">Header</header>
    <div class="bg-blue-200 p-4" contenteditable>Left Sidebar</div>
    <main class="bg-red-200 overflow-auto" contenteditable> Main Content</main>
    <div class="right-side bg-yellow-200 p-4" contenteditable>Right Sidebar</div>
    <footer class="bg-green-200 col-span-3 p-4">Footer</footer>
  </div>