Run Detail

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Create <button id="b">Save</button> with white text, an 8px border radius, and a blue-600 background. While the pointer is over it, the background changes to green-600.

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.

Create <button id="b">Save</button> with white text, an 8px border radius, and a blue-600 background. While the pointer is over it, the background changes to green-600.

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.

Create <button id="b">Save</button> with white text, an 8px border radius, and a blue-600 background. While the pointer is over it, the background changes to green-600.

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.

Create <div id="card">, 200px wide and 120px tall, containing <div id="badge">, 24px wide and 24px tall. The center of the badge must sit exactly on the top-right corner of the card.

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.

Create <div id="card">, 200px wide and 120px tall, containing <div id="badge">, 24px wide and 24px tall. The center of the badge must sit exactly on the top-right corner of the card.

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.

Create <div id="card">, 200px wide and 120px tall, containing <div id="badge">, 24px wide and 24px tall. The center of the badge must sit exactly on the top-right corner of the card.

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.

Create <div id="g">, 1200px wide, as a 12-column grid with no gap, containing <div id="main"> spanning 8 columns and <div id="side"> spanning 4 columns in the same row.

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.

Create <div id="g">, 1200px wide, as a 12-column grid with no gap, containing <div id="main"> spanning 8 columns and <div id="side"> spanning 4 columns in the same row.

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.

Create <div id="g">, 1200px wide, as a 12-column grid with no gap, containing <div id="main"> spanning 8 columns and <div id="side"> spanning 4 columns in the same row.

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.

Create <div id="panel">Hello</div>. With the system in light mode, it has a white background and gray-900 text. With the system in dark mode, it has a gray-900 background and white text.

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.

Create <div id="panel">Hello</div>. With the system in light mode, it has a white background and gray-900 text. With the system in dark mode, it has a gray-900 background and white text.

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.

Create <div id="panel">Hello</div>. With the system in light mode, it has a white background and gray-900 text. With the system in dark mode, it has a gray-900 background and white text.

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.

Create <header id="head">, 64px tall, followed by <main id="content">, 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.

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.

Create <header id="head">, 64px tall, followed by <main id="content">, 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.

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.

Create <header id="head">, 64px tall, followed by <main id="content">, 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.

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.

Create a layout that fills the viewport at any size, containing four empty elements. <header id="top"> is 64px tall across the full width at the top. <footer id="foot"> is 48px tall across the full width at the bottom. Between them, <aside id="side"> is 256px wide on the left and <main id="main"> fills the remaining space. The page does not scroll.

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.

Create a layout that fills the viewport at any size, containing four empty elements. <header id="top"> is 64px tall across the full width at the top. <footer id="foot"> is 48px tall across the full width at the bottom. Between them, <aside id="side"> is 256px wide on the left and <main id="main"> fills the remaining space. The page does not scroll.

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.

Create a layout that fills the viewport at any size, containing four empty elements. <header id="top"> is 64px tall across the full width at the top. <footer id="foot"> is 48px tall across the full width at the bottom. Between them, <aside id="side"> is 256px wide on the left and <main id="main"> fills the remaining space. The page does not scroll.