Basic layout options

Grouping content

• Use <div> when you need a generic wrapper for styling.
• Prefer semantic containers when they fit: <header>, <main>, <section>, <article>, <footer>.

<main>
  <section>
    <h2>Highlights</h2>
    <p>Three reasons to visit the trail.</p>
  </section>
  <div class="note">
    <p>Remember to bring water.</p>
  </div>
</main>

Optional: simple flexbox nav

Plain CSS:

nav {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: #e2e8f0;
}

nav a {
  color: #0f172a;
  font-weight: 600;
}

Tailwind equivalent:

<nav class="flex gap-4 bg-slate-200 p-3">
  <a class="font-semibold text-slate-900" href="index.html">Home</a>
  <a class="font-semibold text-slate-900" href="about.html">About</a>
  <a class="font-semibold text-slate-900" href="gallery.html">Gallery</a>
</nav>

Keep layouts straightforward—stacked sections with consistent spacing are easier to read and mark.