One Column layout
You might see how it looks like here Demo.
<div class="flex min-h-screen flex-col">
<header class="bg-lime-100">
<div class="mx-auto max-w-6xl bg-lime-200 p-2">HEADER</div>
</header>
<main class="flex-grow bg-sky-100">
<section class="bg-red-100 py-10">
<div class="mx-auto max-w-6xl bg-red-200 p-2">
<h2>Section 1</h2>
<p>Content</p>
</div>
</section>
<section class="bg-yellow-100 py-10">
<div class="mx-auto max-w-6xl bg-yellow-200 p-2">
<h2>Section 2</h2>
<p>Content</p>
</div>
</section>
</main>
<footer class="bg-slate-100">
<div class="mx-auto max-w-6xl bg-slate-200 p-2">
<p>© Copyright</p>
</div>
</footer>
</div>
Two Columns Layout.
<div class="flex min-h-screen flex-col">
<header class="mb-4 bg-lime-100">
<div class="mx-auto max-w-6xl bg-lime-200 p-2">HEADER</div>
</header>
<main class="flex flex-grow flex-col">
<div class="mx-auto flex w-full max-w-6xl flex-grow flex-col gap-4 md:flex-row">
<div class="w-full bg-slate-200 p-4 md:w-60">Sidebar</div>
<div class="flex-grow bg-slate-200">
<div class="mx-auto w-full max-w-6xl p-4">Content here</div>
</div>
</div>
</main>
<footer class="mt-4 bg-slate-100">
<div class="mx-auto max-w-6xl bg-slate-200 p-2 text-center">
<p>© Copyright</p>
</div>
</footer>
</div>