Highlight centering sample code

client/index.html

@@ -11,7 +11,6 @@
         -webkit-font-smoothing: antialiased;
     }
     code {
-        border-radius: 4px;
         font-family: 'Source Code Pro', monospace;
         font-size: 14px;
     }

client/layouts/Centering.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
 
 const Centering = () => {
     return (
@@ -13,7 +14,19 @@ const Centering = () => {
                     </div>
                 }
                 source={
-                    <div>source</div>
+<SampleCode
+lang="html"
+code={`
+<div style="
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+">
+    CENTER
+</div>
+`}
+/>
                 }
             />
         </DetailsLayout>

client/placeholders/BrowserFrame.jsx

@@ -6,12 +6,12 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         <div className="br2 ba b--black-20">
-            <div className="flex pa3 bb b--black-20 items-center">
+            <div className="flex pa3 bb b--black-20 items-center bg-black-05">
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="br-100 mr1 w1 h1 bg-gold" />
                 <div className="br-100 mr1 w1 h1 bg-red" />
                 <div className="ml-auto">
-                    <button className="pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
+                    <button className="bn pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
                         {isContentActive ? 'Source' : 'Demo'}
                     </button>
                 </div>