Tailwind layout snippets

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>&copy; Copyright</p>
    </div>
  </footer>
</div>

Two Columns Layout.

See the demo here.

<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>&copy; Copyright</p>
    </div>
  </footer>
</div>