diff --git a/examples/simple/index.html b/examples/simple/index.html
index 57bf0c8..fa3dfed 100755
--- a/examples/simple/index.html
+++ b/examples/simple/index.html
@@ -24,7 +24,6 @@
         width: 20vw;
         height: 20vw;
         overflow: hidden;
-        resize: both;
         padding: 5px;
         text-align: center;
         border: 1px solid #ccc;
@@ -35,6 +34,10 @@
         white-space: nowrap;
       }
 
+      .description {
+        width: 100%;
+      }
+
       .centered {
         position: absolute;
         top: 50%;
@@ -42,6 +45,51 @@
         transform: translate(-50%, -50%);
       }
 
+      .circle {
+        position: relative;
+        width: 2em;
+        height: 0;
+        padding: 1em 0;
+        margin: 1em auto;
+        border-radius: 50%;
+        background: #a7cd80;
+        color: #ffffff;
+      }
+
+      .xcontent {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+      }
+
+      .xcontent:before {
+        content: '';
+        vertical-align: middle;
+        display: inline-block;
+        width: 0;
+        height: 100%;
+      }
+
+      .xcontent span {
+        vertical-align: middle;
+        display: inline-block;
+        line-height: 1;
+        font-size: 1em;
+      }
+
+      .line { padding: 0.5em; }
+      .line--1 { padding-left: 1em; }
+      .line--2 { padding-left: 2em; }
+      .line--3 { padding-left: 3em; }
+      .line--4 { padding-left: 4em; }
+      code {
+        color: #666;
+        font-size: .8em;
+      }
+
     </style>
   </head>
   <body>
diff --git a/examples/simple/index.js b/examples/simple/index.js
index 072bb8f..f96ab02 100755
--- a/examples/simple/index.js
+++ b/examples/simple/index.js
@@ -2,56 +2,84 @@ import React from 'react';
 import ReactDom from 'react-dom';
 import ScaleText from '../../src/index';
 
+const Circle = ({ text }) => (
+  <div className="circle" style={{ float: 'left' }}>
+  <div className="xcontent">
+    <span>{text}</span>
+  </div>
+</div>
+);
+
+const Box = ({ text = "", centered = false, ...props }) => (
+  <div className="box">
+    <ScaleText {...props}>
+      <span className={`box-text ${centered ? 'centered' : ''}`}>
+        {text}
+      </span>
+    </ScaleText>
+  </div>
+);
+
 const App = () => (
   <div>
-    <div className="box-descriptions">
-      <ul>
-        <li> <b>Box 1</b> - <code>&lt;ScaleText /&gt;</code> (<i>centered</i>)</li>
-        <li> <b>Box 2</b> - <code>&lt;ScaleText minFontSize={20} /&gt;</code> (<i>centered</i>)</li>
-        <li> <b>Box 3</b> - <code>&lt;ScaleText maxFontSize={55} /&gt;</code> (<i>centered</i>)</li>
-        <li> <b>Box 4</b> -
-          <code>&lt;ScaleText minFontSize={20} maxFontSize={55} /&gt;</code>
-        </li>
-        <li> <b>Box 5</b> - <code>&lt;ScaleText /&gt;</code></li>
-      </ul>
+    <h2>Examples</h2>
+    <p>To see the component in action, resize the browser window.</p>
+    <p>The markup rendering each box below is the following:<br/>
+    <code><pre style={{ whiteSpace: 'pre' }}>
+      <span className="line line--1">&lt;div class="box"&gt;</span><br/>
+      <span className="line line--2">  &lt;ScaleText&gt;</span><br/>
+      <span className="line line--3">    &lt;span class="box-text"&gt;</span><br/>
+      <span className="line line--4">      Box 1</span><br/>
+      <span className="line line--3">    &lt;/span&gt;</span><br/>
+      <span className="line line--2">  &lt;/ScaleText&gt;</span><br/>
+      <span className="line line--1">&lt;/div&gt;</span><br/>
+      </pre></code>
+    </p>
+    <div className="description">
+      <Circle text={1}/>
+      <code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText /&gt;</code>
+      <div style={{ clear: 'both' }}></div>
     </div>
     <div className="box-container">
-      <div className="box">
-        <ScaleText>
-          <span className="box-text centered">
-            Box 1
-          </span>
-        </ScaleText>
-      </div>
-      <div className="box">
-        <ScaleText minFontSize={20}>
-          <span className="box-text centered">
-            Box 2
-          </span>
-        </ScaleText>
-      </div>
-      <div className="box">
-        <ScaleText maxFontSize={55}>
-          <span className="box-text centered">
-            Box 3
-          </span>
-        </ScaleText>
-      </div>
-      <div className="box">
-        <ScaleText minFontSize={20} maxFontSize={55}>
-          <span className="box-text">
-            Box 4
-          </span>
-        </ScaleText>
-      </div>
-      <div className="box">
-        <ScaleText>
-          <span className="box-text">
-            Box 5
-          </span>
-        </ScaleText>
-      </div>
+      <Box text={"Box 1"} centered />
+    </div>
+
+    <div className="description">
+      <Circle text={2}/>
+      <code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText minFontSize={20} /&gt;</code>
+      <div style={{ clear: 'both' }}></div>
+    </div>
+    <div className="box-container">
+      <Box text={"Box 2"} centered minFontSize={20} />
+    </div>
+
+    <div className="description">
+      <Circle text={3}/>
+      <code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText maxFontSize={55} /&gt;</code>
+      <div style={{ clear: 'both' }}></div>
     </div>
+    <div className="box-container">
+      <Box text={"Box 3"} centered maxFontSize={55} />
+    </div>
+
+    <div className="description">
+      <Circle text={4}/>
+      <code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText minFontSize={20} maxFontSize={55} /&gt;</code>
+      <div style={{ clear: 'both' }}></div>
+    </div>
+    <div className="box-container">
+      <Box text={"Box 4"} minFontSize={20} maxFontSize={55} />
+    </div>
+
+    <div className="description">
+      <Circle text={5}/>
+      <code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText /&gt;</code>
+      <div style={{ clear: 'both' }}></div>
+    </div>
+    <div className="box-container">
+      <Box text={"Box 4"} minFontSize={20} maxFontSize={55} />
+    </div>
+
   </div>
 );
 
diff --git a/webpack.config.js b/webpack.config.js
index a001d6d..0156efd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -40,9 +40,8 @@ module.exports = {
   output: {
     path: __dirname + '/lib',
     filename: fileName,
-    library: exportName, 
-    libraryTarget: 'umd',
-    umdNamedDefine: true
+    library: exportName,
+    libraryTarget: 'umd'
   },
   plugins: plugins,
   resolve: {
