Put example outputs in first tab.

docs/styles/align.md

@@ -27,6 +27,11 @@ To specify alignment on a single axis, use the respective style and type:
 
 This example contains a simple app with two labels centered on the screen with `align: center middle;`:
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/align.py"}
+    ```
+
 === "align.py"
 
     ```python
@@ -39,17 +44,16 @@ This example contains a simple app with two labels centered on the screen with `
     --8<-- "docs/examples/styles/align.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/align.py"}
-
-    ```
-
 ### All alignments
 
 The next example shows a 3 by 3 grid of containers with text labels.
 Each label has been aligned differently inside its container, and its text shows its `align: ...` value.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/align_all.py"}
+    ```
+
 === "align_all.py"
 
     ```python
@@ -62,11 +66,6 @@ Each label has been aligned differently inside its container, and its text shows
     --8<-- "docs/examples/styles/align_all.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/align_all.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/background.md

@@ -16,6 +16,11 @@ The style `background` needs a [`<color>`](../../css_types/color) followed by an
 
 This example creates three widgets and applies a different background to each.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/background.py"}
+    ```
+
 === "background.py"
 
     ```python
@@ -28,15 +33,15 @@ This example creates three widgets and applies a different background to each.
     --8<-- "docs/examples/styles/background.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/background.py"}
-    ```
-
 ### Different transparency settings
 
 The next example creates ten widgets layed out side by side to show the effect of setting different percentages for the transparency of the background color.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/background_transparency.py"}
+    ```
+
 === "background_transparency.py"
 
     ```python
@@ -49,11 +54,6 @@ The next example creates ten widgets layed out side by side to show the effect o
     --8<-- "docs/examples/styles/background_transparency.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/background_transparency.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/border.md

@@ -58,6 +58,11 @@ Alternatively, you can see the examples below.
 
 This examples shows three widgets with different border styles.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/border.py"}
+    ```
+
 === "border.py"
 
     ```python
@@ -70,15 +75,15 @@ This examples shows three widgets with different border styles.
     --8<-- "docs/examples/styles/border.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/border.py"}
-    ```
-
 ### All border types
 
 The next example shows a grid with all the available border types.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/border_all.py"}
+    ```
+
 === "border_all.py"
 
     ```py
@@ -91,11 +96,6 @@ The next example shows a grid with all the available border types.
     --8<-- "docs/examples/styles/border_all.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/border_all.py"}
-    ```
-
 ### Borders and outlines
 
 The next example makes the difference between [`border`](./border.md) and [`outline`](./outline.md) clearer by having three labels side-by-side.

docs/styles/box_sizing.md

@@ -21,6 +21,11 @@ Both widgets in this example have the same height (5).
 The top widget has `box-sizing: border-box` which means that padding and border reduce the space for content.
 The bottom widget has `box-sizing: content-box` which increases the size of the widget to compensate for padding and border.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/box_sizing.py"}
+    ```
+
 === "box_sizing.py"
 
     ```python
@@ -33,11 +38,6 @@ The bottom widget has `box-sizing: content-box` which increases the size of the
     --8<-- "docs/examples/styles/box_sizing.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/box_sizing.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/color.md

@@ -18,6 +18,11 @@ Instead of a [`<color>`](../../css_types/color), one can use the special value `
 
 This example sets a different text color for each of three different widgets.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/color.py"}
+    ```
+
 === "color.py"
 
     ```python
@@ -30,15 +35,15 @@ This example sets a different text color for each of three different widgets.
     --8<-- "docs/examples/styles/color.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/color.py"}
-    ```
-
 ### Auto
 
 The next example shows how `auto` chooses between a lighter or a darker text color to increase the contrast and improve readability.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/color_auto.py"}
+    ```
+
 === "color_auto.py"
 
     ```py
@@ -51,11 +56,6 @@ The next example shows how `auto` chooses between a lighter or a darker text col
     --8<-- "docs/examples/styles/color_auto.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/color_auto.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/content_align.md

@@ -28,6 +28,11 @@ To specify content alignment on a single axis, use the respective style and type
 
 This first example shows three labels stacked vertically, each with different content alignments.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/content_align.py"}
+    ```
+
 === "content_align.py"
 
     ```python
@@ -40,16 +45,16 @@ This first example shows three labels stacked vertically, each with different co
     --8<-- "docs/examples/styles/content_align.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/content_align.py"}
-    ```
-
 ### All content alignments
 
 The next example shows a 3 by 3 grid of labels.
 Each label has its text aligned differently.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/content_align_all.py"}
+    ```
+
 === "content_align_all.py"
 
     ```py
@@ -62,11 +67,6 @@ Each label has its text aligned differently.
     --8<-- "docs/examples/styles/content_align_all.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/content_align_all.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/display.md

@@ -19,6 +19,11 @@ display: block | none;
 
 Note that the second widget is hidden by adding the `"remove"` class which sets the display style to `none`.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/display.py"}
+    ```
+
 === "display.py"
 
     ```python
@@ -31,11 +36,6 @@ Note that the second widget is hidden by adding the `"remove"` class which sets
     --8<-- "docs/examples/styles/display.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/display.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/height.md

@@ -17,6 +17,11 @@ By default, it sets the height of the content area, but if [`box-sizing`](./box_
 
 This examples creates a widget with a height of 50% of the screen.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/height.py"}
+    ```
+
 === "height.py"
 
     ```python
@@ -29,11 +34,6 @@ This examples creates a widget with a height of 50% of the screen.
     --8<-- "docs/examples/styles/height.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/height.py"}
-    ```
-
 ### All height formats
 
 The next example creates a series of wide widgets with heights set with different units.

docs/styles/layout.md

@@ -25,6 +25,11 @@ See the [layout](../guide/layout.md) guide for more information.
 Note how the `layout` property affects the arrangement of widgets in the example below.
 To learn more about the grid layout, you can see the [layout guide](../guide/layout.md) or the [grid reference](../grid).
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/layout.py"}
+    ```
+
 === "layout.py"
 
     ```python
@@ -37,11 +42,6 @@ To learn more about the grid layout, you can see the [layout guide](../guide/lay
     --8<-- "docs/examples/styles/layout.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/layout.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/opacity.md

@@ -18,6 +18,11 @@ Values outside of these ranges will be clamped.
 This example shows, from top to bottom, increasing opacity values for a label with a border and some text.
 When the opacity is zero, all we see is the (black) background.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/opacity.py"}
+    ```
+
 === "opacity.py"
 
     ```python
@@ -30,11 +35,6 @@ When the opacity is zero, all we see is the (black) background.
     --8<-- "docs/examples/styles/opacity.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/opacity.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/outline.md

@@ -57,6 +57,11 @@ This example shows a widget with an outline. Note how the outline occludes the t
 
 The next example shows a grid with all the available outline types.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/outline_all.py"}
+    ```
+
 === "outline_all.py"
 
     ```py
@@ -69,11 +74,6 @@ The next example shows a grid with all the available outline types.
     --8<-- "docs/examples/styles/outline_all.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/outline_all.py"}
-    ```
-
 ### Borders and outlines
 
 The next example makes the difference between [`border`](./border.md) and [`outline`](./outline.md) clearer by having three labels side-by-side.

docs/styles/tint.md

@@ -14,6 +14,11 @@ The tint rule blends a [`<color>`](../css_types/color.md) with the widget. The c
 
 This examples shows a green tint with gradually increasing alpha.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/tint.py"}
+    ```
+
 === "tint.py"
 
     ```python
@@ -26,11 +31,6 @@ This examples shows a green tint with gradually increasing alpha.
     --8<-- "docs/examples/styles/tint.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/tint.py"}
-    ```
-
 ## CSS
 
 ```sass

docs/styles/width.md

@@ -17,6 +17,11 @@ By default, it sets the width of the content area, but if [`box-sizing`](./box_s
 
 This example adds a widget with 50% width of the screen.
 
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/width.py"}
+    ```
+
 === "width.py"
 
     ```python
@@ -29,11 +34,6 @@ This example adds a widget with 50% width of the screen.
     --8<-- "docs/examples/styles/width.css"
     ```
 
-=== "Output"
-
-    ```{.textual path="docs/examples/styles/width.py"}
-    ```
-
 ### All width formats
 
 === "Output"