diff --git a/docs/css/react.scss b/docs/css/react.scss
index 3400c9af9ae9..237c430843e0 100644
--- a/docs/css/react.scss
+++ b/docs/css/react.scss
@@ -390,6 +390,38 @@ h1, h2, h3, h4, h5, h6 {
   @include clearfix;
 }
 
+/* JSX Compiler */
+
+.jsxCompiler {
+  margin: 0 auto;
+  padding-top: 20px;
+  width: 1220px;
+
+  label.compiler-option {
+    display: block;
+    margin-top: 5px;
+  }
+
+  #jsxCompiler {
+    margin-top: 20px;
+  }
+
+  .playgroundPreview {
+    padding: 0;
+    width: 600px;
+
+    pre {
+      @include code-typography;
+    }
+  }
+
+  .playgroundError {
+    // The compiler view kills padding in order to render the CodeMirror code
+    // more nicely. For the error view, put a padding back
+    padding: 15px 20px;
+  }
+}
+
 .docs-prev {
   float: left;
 }