diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php
new file mode 100644
index 000000000000..17b225d589ac
--- /dev/null
+++ b/docs/source/_partials/class-table.blade.php
@@ -0,0 +1,22 @@
+<div class="border-t border-b border-grey-light">
+  <div class="max-h-sm overflow-y-scroll">
+    <table class="w-full text-left table-collapse">
+      <thead>
+        <tr>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+        </tr>
+      </thead>
+      <tbody class="align-baseline">
+        @foreach ($rows as $row)
+        <tr>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{{ $row[2] }}</td>
+        </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index ec36b4da93e6..9fdb51cbc5b6 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -11,26 +11,19 @@ features:
 
 @include('_partials.work-in-progress')
 
-<div class="border-t border-grey-lighter">
-  <table class="w-full text-left table-collapse">
-    <thead>
-      <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-      </tr>
-    </thead>
-    <tbody class="align-baseline">
-      @foreach ($page->config['colors'] as $name => $value)
-      <tr>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">background-color: {{ $value }};</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
-      </tr>
-      @endforeach
-    </tbody>
-  </table>
-</div>
+@include('_partials.class-table', [
+  'rows' => $page->config['colors']->map(function ($value, $name) {
+    $class = ".bg-{$name}";
+    $code = "background-color: {$value};";
+    $color = implode(' ', array_reverse(explode('-', $name)));
+    $description = "Set the background color of an element to {$color}.";
+    return [
+      $class,
+      $code,
+      $description,
+    ];
+  })->values()->all()
+])
 
 ## Hover
 
diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md
index c0d2dbf0edb7..5dd2ae2c5159 100644
--- a/docs/source/docs/background-position.blade.md
+++ b/docs/source/docs/background-position.blade.md
@@ -11,61 +11,52 @@ features:
 
 @include('_partials.work-in-progress')
 
-<div class="border-t border-grey-lighter">
-  <table class="w-full text-left table-collapse">
-    <thead>
-      <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-      </tr>
-    </thead>
-    <tbody class="align-baseline">
-      <tr>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
-        <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
-        <td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
-      </tr>
-      <tr>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
-        <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
-        <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.bg-bottom',
+      'background-position: bottom;',
+      'Place the background image on the bottom edge.',
+    ],
+    [
+      '.bg-center',
+      'background-position: center;',
+      'Place the background image in the center.',
+    ],
+    [
+      '.bg-left',
+      'background-position: left;',
+      'Place the background image on the left edge.',
+    ],
+    [
+      '.bg-left-bottom',
+      'background-position: left bottom;',
+      'Place the background image on the left bottom edge.',
+    ],
+    [
+      '.bg-left-top',
+      'background-position: left top;',
+      'Place the background image on the left top edge.',
+    ],
+    [
+      '.bg-right',
+      'background-position: right;',
+      'Place the background image on the right edge.',
+    ],
+    [
+      '.bg-right-bottom',
+      'background-position: right bottom;',
+      'Place the background image on the right bottom edge.',
+    ],
+    [
+      '.bg-right-top',
+      'background-position: right top;',
+      'Place the background image on the right top edge.',
+    ],
+    [
+      '.bg-top',
+      'background-position: top;',
+      'Place the background image on the top edge.',
+    ],
+  ]
+])
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 8a8c63e66e70..e92b00ff513c 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -71,6 +71,10 @@ config.height = Object.assign(config.height, {
   '128': '32rem',
 })
 
+config.maxHeight = Object.assign(config.maxHeight, {
+  'sm': '30rem',
+})
+
 config.padding = Object.assign(config.padding, {
   '10': '2.5rem',
   '12': '3rem',