Ten short Tailwind CSS v4 layout tasks from easy to tricky, each sent on its own, rendered in a real browser and measured. Three takes per question.
Rounds stay open: later videos added their new models to this one.
Provide only one ```html code block containing an HTML fragment. The fragment goes inside the empty <body> of a page that already has Tailwind CSS v4 loaded with its default theme. Style it using only Tailwind utility classes: do not use style attributes, and do not use <style>, <script>, or <link> tags. Use exactly the ids given. Do not include explanations.
===PART===
Create <div id="box">, 240px wide and 160px tall, with a blue-500 background. Center it horizontally and vertically in the viewport at any viewport size.
===PART===
Create <div id="row">, 900px wide, containing <div id="a">, <div id="b">, and <div id="c"> side by side. The three children must have equal widths, a 16px gap between them, and a height of 64px.
===PART===
Create <p id="t">, 200px wide, containing the text "The quick brown fox jumps over the lazy dog and keeps on running". Keep the text on one line and cut off the overflow with an ellipsis.
===PART===
Create <div id="wrap"> containing <div id="left">L</div> and <div id="right">R</div>. Below Tailwind's md breakpoint, stack them vertically with left above right. At md and wider, place them side by side with left on the left.
===PART===
Create <button id="b">Save</button> with white text, an 8px border radius, and a background. While the pointer is over it, the background changes to .
===PART===
Create , 200px wide and 120px tall, containing , 24px wide and 24px tall. The center of the badge must sit exactly on the top-right corner of the card.
===PART===
Create , 1200px wide, as a 12-column grid with no gap, containing spanning 8 columns and spanning 4 columns in the same row.
===PART===
Create . With the system in light mode, it has a white background and text. With the system in dark mode, it has a background and white text.
===PART===
Create , 64px tall, followed by , 2000px tall. The header must stay at the top of the viewport while the page scrolls, and it must not cover the top of the content before scrolling.
===PART===
Create a layout that fills the viewport at any size, containing four empty elements. is 64px tall across the full width at the top. is 48px tall across the full width at the bottom. Between them, is 256px wide on the left and fills the remaining space. The page does not scroll.
Sorted by score, then cost. Open a row to load its answer.
blue-600green-600<div id="card"><div id="badge"><div id="g"><div id="main"><div id="side"><div id="panel">Hello</div>gray-900gray-900<header id="head"><main id="content"><header id="top"><footer id="foot"><aside id="side"><main id="main">