CodeautomaticNumeric scoring32,000 tok

Tailwind Quick Ten

Current version: 1.0

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

November 4, 202617 modelsVideo: ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
November 4, 20269 modelsVideo: Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)

Details

What is measured. Ten small layouts, level 1 to 4. An answer passes only if the rendered page meets every measurement: position, size, color, responsive behavior, hover and dark mode.

How it runs. Every model gets each question separately with a fresh context, three times. The score is the share of answers that passed.

How it is graded. The answer is compiled with Tailwind v4 and measured in headless Chrome, so any classes that produce the layout pass. Inline styles and style tags fail. No judge reads it. An empty answer counts as wrong. A question the provider never answered is reported separately and left out of the score.

Opening prompt

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.