Rebuild the CSS course project with Tailwind.

Start from the behavior, not from a list of classes. Write down the page requirements:

semantic header, navigation, main content, sections, and footer
readable type and content width
one-column base layout with wider card tracks when content fits
visible hover, focus, active, and disabled states
complete light and dark palettes
reduced-motion behavior
no horizontal overflow at 200% zoom

Build the structural skeleton first:

<body class="bg-white text-gray-950 dark:bg-gray-950 dark:text-white">
  <header class="border-b border-gray-200 dark:border-gray-800">...</header>

  <main>
    <section class="mx-auto max-w-6xl px-4 py-16 sm:px-6">
      <h1 class="max-w-3xl text-4xl font-bold tracking-tight md:text-6xl">
        Learn CSS by building
      </h1>

      <ul class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        ...
      </ul>
    </section>
  </main>
</body>

Then work one system at a time: page/container sizing, layout, spacing rhythm, typography, colors, interactive states, responsive changes, and motion. This makes conflicts easier to locate than styling each element to completion in isolation.

Keep repeated values in the theme only when they represent project decisions. Extract repeated card markup into a component so semantics and focus behavior stay consistent. Keep one-off composition local.

Use real content early. Add the longest title, missing image, validation error, translated navigation item, and several cards. Keyboard-test every action. Emulate dark scheme and reduced motion. Resize continuously and zoom instead of checking only named breakpoints.

Compare the two versions in DevTools. The generated CSS should express the same deliberate layout, not a different design chosen by class-name convenience.

For each important element, compare computed display, track/flex sizing, width constraints, spacing, typography, color, focus, and media-query conditions. Differences are acceptable only when intentional and documented.

Your action is to complete the page and produce a short verification table covering semantic structure, keyboard order, focus, contrast, responsive layout, zoom, dark mode, reduced motion, class detection, and production CSS output. Fix every unexplained difference before calling the translation complete.

Build a complete Tailwind page

Take this course offline