Use placeholder for centering

client/layouts/Centering.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import Dot from '../placeholders/Dot';
+import Rectangle from '../placeholders/Rectangle';
 import SampleCode from '../SampleCode';
 import useDocumentTitle from '../useDocumentTitle';
 
@@ -14,7 +16,10 @@ const Centering = () => {
             <BrowserFrame
                 content={
                     <div className="h-100 flex flex-column items-center justify-center">
-                        <div className="f1 b">CENTER</div>
+                        <Dot size={64} />
+                        <div className="w-40 mt3"><Rectangle /></div>
+                        <div className="w-30 mt2"><Rectangle /></div>
+                        <div className="w-20 mt2"><Rectangle /></div>
                     </div>
                 }
                 source={
@@ -24,10 +29,9 @@ code={`
 <div style="
     align-items: center;
     display: flex;
-    flex-direction: column;
     justify-content: center;
 ">
-    CENTER
+    ...
 </div>
 `}
 />

client/layouts/Sidebar.jsx

@@ -12,6 +12,7 @@ const Sidebar = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sidebar</h1>
+            <div className="lh-copy mb3">Try to scroll the main content!</div>
             <BrowserFrame
                 content={
                     <div className="h-100 flex">

client/layouts/StickyHeader.jsx

@@ -13,6 +13,7 @@ const StickyHeader = () => {
     return (
         <DetailsLayout>
             <h1 className="f1 tc">Sticky header</h1>
+            <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
             <BrowserFrame
                 content={
                     <div>