From f1f73f917bc7f205c6c3730a74d3096f0141a7e1 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <igor.lima@sabium.com.br>
Date: Wed, 6 Feb 2019 13:06:26 -0200
Subject: [PATCH 01/14] feat(index.html): initial developments tests on
 show/hide code doc

---
 index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  | 18 +++++++++++
 2 files changed, 109 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 1b5ead2..1be8f3a 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+    <link href="./css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
@@ -51,8 +51,19 @@
         <button type="button" class="nes-btn is-warning">Warning</button>
         <button type="button" class="nes-btn is-error">Error</button>
         <button type="button" class="nes-btn is-disabled">Disabled</button>
+        <button type="button" class="nes-btn is-primary show-code" id="show-buttons-code">Show Code</button>
       </div>
     </section>
+    <section class="nes-container code" id="code-buttons">
+      <code>
+        <p><span><</span>button type="button" class="nes-btn">Normal<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-primary">Primary<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-success">Success<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
+        <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
+      </code>
+    </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Containers</h2>
@@ -462,5 +473,84 @@
     link.addEventListener("mouseout", function() {
       octocat.classList.remove("animate");
     });
+
+    window.onload = function() {
+      var buttons = document.querySelector("#show-buttons-code");
+      var codeButtons = document.querySelector("#code-buttons");
+
+      buttons.addEventListener("click", function() {
+        console.log('test')
+      });
+
+      // var containers = document.querySelector("#show-containers-code");
+      // container.addEventListener("click", function() {
+      //   console.log('oi2')
+      // });
+
+      // var radios = document.querySelector("#show-radios-code");
+      // radios.addEventListener("click", function() {
+      //   console.log('oi3')
+      // });
+
+      // var checkboxes = document.querySelector("#show-checkboxes-code");
+      // checkboxes.addEventListener("click", function() {
+      //   console.log('oi4')
+      // });
+
+      // var avatars = document.querySelector("#show-avatars-code");
+      // avatars.addEventListener("click", function() {
+      //   console.log('oi5')
+      // });
+
+      // var forms = document.querySelector("#show-forms-code");
+      // forms.addEventListener("click", function() {
+      //   console.log('oi6')
+      // });
+
+      // var ballons = document.querySelector("#show-ballons-code");
+      // ballons.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var lists = document.querySelector("#show-lists-code");
+      // lists.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var table = document.querySelector("#show-table-code");
+      // table.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var progress = document.querySelector("#show-progress-code");
+      // progress.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var badges = document.querySelector("#show-badges-code");
+      // badges.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var reactions = document.querySelector("#show-icons-reactions-code");
+      // reactions.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var sns = document.querySelector("#show-icons-sns-code");
+      // sns.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var others = document.querySelector("#show-icons-others-code");
+      // others.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+
+      // var controllers = document.querySelector("#show-icons-controllers-code");
+      // controllers.addEventListener("click", function() {
+      //   console.log('oi7')
+      // });
+    }
   </script>
 </html>
diff --git a/style.css b/style.css
index 0d4f80b..af8e30e 100644
--- a/style.css
+++ b/style.css
@@ -100,3 +100,21 @@ div.containers > .nes-container {
     display: none;
   }
 }
+
+.show-code {
+  font-size: .7em;
+  height: 34px;
+  width: 128px;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+.code {
+  display: none;
+  font-size: .8em;
+  color: white;
+  background-color: #ce372b;
+  padding: 15px 0 0px 10px;
+  margin-top: -20px;
+}

From 1f6d222b78eb3f80b08ae85e1c5afa30eb3deaeb Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 6 Feb 2019 18:51:13 -0200
Subject: [PATCH 02/14] feat(index.html): added first draft of show/hide code
 and copy.

---
 index.html | 111 +++++++++++++----------------------------------------
 style.css  |  15 +++++---
 2 files changed, 37 insertions(+), 89 deletions(-)

diff --git a/index.html b/index.html
index 1be8f3a..988a85d 100644
--- a/index.html
+++ b/index.html
@@ -44,14 +44,14 @@
 
     <section class="nes-container with-title">
       <h2 class="title">Buttons</h2>
-      <div>
+      <div id="buttons">
         <button type="button" class="nes-btn">Normal</button>
         <button type="button" class="nes-btn is-primary">Primary</button>
         <button type="button" class="nes-btn is-success">Success</button>
         <button type="button" class="nes-btn is-warning">Warning</button>
         <button type="button" class="nes-btn is-error">Error</button>
         <button type="button" class="nes-btn is-disabled">Disabled</button>
-        <button type="button" class="nes-btn is-primary show-code" id="show-buttons-code">Show Code</button>
+        <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
       </div>
     </section>
     <section class="nes-container code" id="code-buttons">
@@ -62,6 +62,7 @@
         <p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
+        <button type="button" class="nes-btn show-code copy" id="copy-buttons" onClick="copyToClipboard('buttons')">Copy</button>
       </code>
     </section>
 
@@ -465,92 +466,34 @@
     </footer>
   </body>
   <script>
-    var link = document.querySelector("a.github-link");
-    var octocat = document.querySelector("a.github-link > i.nes-octocat");
-    link.addEventListener("mouseover", function() {
-      octocat.classList.add("animate");
-    });
-    link.addEventListener("mouseout", function() {
-      octocat.classList.remove("animate");
-    });
+    function copyToClipboard(element) {
+      var divToClipboard = document.querySelector('#' + element);
+      const el = document.createElement('textarea');
+      el.value = divToClipboard.innerHTML;
+      el.setAttribute('readonly', '');
+      el.style.position = 'absolute';
+      el.style.left = '-9999px';
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+    }
 
     window.onload = function() {
-      var buttons = document.querySelector("#show-buttons-code");
-      var codeButtons = document.querySelector("#code-buttons");
-
-      buttons.addEventListener("click", function() {
-        console.log('test')
+      var link = document.querySelector("a.github-link");
+      var octocat = document.querySelector("a.github-link > i.nes-octocat");
+      link.addEventListener("mouseover", function() {
+        octocat.classList.add("animate");
+      });
+      link.addEventListener("mouseout", function() {
+        octocat.classList.remove("animate");
       });
 
-      // var containers = document.querySelector("#show-containers-code");
-      // container.addEventListener("click", function() {
-      //   console.log('oi2')
-      // });
-
-      // var radios = document.querySelector("#show-radios-code");
-      // radios.addEventListener("click", function() {
-      //   console.log('oi3')
-      // });
-
-      // var checkboxes = document.querySelector("#show-checkboxes-code");
-      // checkboxes.addEventListener("click", function() {
-      //   console.log('oi4')
-      // });
-
-      // var avatars = document.querySelector("#show-avatars-code");
-      // avatars.addEventListener("click", function() {
-      //   console.log('oi5')
-      // });
-
-      // var forms = document.querySelector("#show-forms-code");
-      // forms.addEventListener("click", function() {
-      //   console.log('oi6')
-      // });
-
-      // var ballons = document.querySelector("#show-ballons-code");
-      // ballons.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var lists = document.querySelector("#show-lists-code");
-      // lists.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var table = document.querySelector("#show-table-code");
-      // table.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var progress = document.querySelector("#show-progress-code");
-      // progress.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var badges = document.querySelector("#show-badges-code");
-      // badges.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var reactions = document.querySelector("#show-icons-reactions-code");
-      // reactions.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var sns = document.querySelector("#show-icons-sns-code");
-      // sns.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var others = document.querySelector("#show-icons-others-code");
-      // others.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
-
-      // var controllers = document.querySelector("#show-icons-controllers-code");
-      // controllers.addEventListener("click", function() {
-      //   console.log('oi7')
-      // });
+      var buttons = document.querySelector("#show-buttons-code");
+      var codeButtons = document.querySelector("#code-buttons");
+      buttons.addEventListener("click", function() {
+        codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
+      });
     }
   </script>
 </html>
diff --git a/style.css b/style.css
index af8e30e..bfb67af 100644
--- a/style.css
+++ b/style.css
@@ -104,17 +104,22 @@ div.containers > .nes-container {
 .show-code {
   font-size: .7em;
   height: 34px;
-  width: 128px;
+  width: 43px;
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: -5px;
+  top: -5px;
+}
+
+.copy {
+  height: 34px;
+  width: 58px;
 }
 
 .code {
   display: none;
   font-size: .8em;
-  color: white;
-  background-color: #ce372b;
+  color: #e76e55;
+  background-color: rgba(45, 45, 45, .9);
   padding: 15px 0 0px 10px;
   margin-top: -20px;
 }

From a90c9c827777095778b1a8e1695a5d72fe3b9d15 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 6 Feb 2019 19:29:33 -0200
Subject: [PATCH 03/14] feat(index.html): added radios, checkboxes and
 refactored copy/events

---
 index.html | 60 ++++++++++++++++++++++++++++++++++++++++++++----------
 style.css  |  4 ++--
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 988a85d..77d588e 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,8 @@
         <button type="button" class="nes-btn is-warning">Warning</button>
         <button type="button" class="nes-btn is-error">Error</button>
         <button type="button" class="nes-btn is-disabled">Disabled</button>
-        <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
     </section>
     <section class="nes-container code" id="code-buttons">
       <code>
@@ -62,13 +62,13 @@
         <p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
         <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
-        <button type="button" class="nes-btn show-code copy" id="copy-buttons" onClick="copyToClipboard('buttons')">Copy</button>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
       </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Containers</h2>
-      <div class="containers">
+      <div class="containers" id="containers">
         <div class="nes-container with-title is-centered">
           <p class="title">Container.is-centered</p>
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
@@ -84,11 +84,30 @@
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-containers-code"><></button>
+    </section>
+    <section class="nes-container code" id="code-containers">
+      <code>
+        <p><span><</span>div class="nes-container with-title is-centered">
+          <span><</span>p class="title">Container.is-centered<span><</span>/p>
+          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
+        <span><</span>/div></p>
+        <p><span><</span>div class="nes-container is-dark with-title">
+          <span><</span>p class="title">Container.is-dark<span><</span>/p>
+          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
+        <span><</span>/div></p>
+        <p><span><</span>div class="nes-container is-rounded">
+          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
+        <span><</span>/div>
+        <p><span><</span>div class="nes-container is-rounded is-dark">
+          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
+        <span><</span>/div>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
+      </code>
     </section>
-
     <section class="nes-container with-title">
       <h2 class="title">Radios</h2>
-      <div>
+      <div id="radios">
         <label>
           <input type="radio" class="nes-radio" name="answer" checked />
           <span>Yes</span>
@@ -98,6 +117,20 @@
           <span>No</span>
         </label>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-radios-code"><></button>
+    </section>
+    <section class="nes-container code" id="code-radios">
+      <code>
+        <p><span><</span>label>
+          <span><</span>input type="radio" class="nes-radio" name="answer" checked />
+          <span><</span>span>Yes<span><</span>/span>
+        <span><</span>/label></p>
+        <p><span><</span>label>
+          <span><</span>input type="radio" class="nes-radio" name="answer" />
+          <span><</span>span>No<span><</span>/span>
+        <span><</span>/label></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
@@ -106,6 +139,7 @@
         <input type="checkbox" class="nes-checkbox" checked />
         <span>Enable</span>
       </label>
+      <button type="button" class="nes-btn is-error show-code" id="show-checkboxes-code"><></button>
     </section>
 
     <section class="nes-container with-title">
@@ -120,6 +154,7 @@
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-avatars-code"><></button>
     </section>
 
     <section class="form nes-container with-title">
@@ -468,7 +503,7 @@
   <script>
     function copyToClipboard(element) {
       var divToClipboard = document.querySelector('#' + element);
-      const el = document.createElement('textarea');
+      var el = document.createElement('textarea');
       el.value = divToClipboard.innerHTML;
       el.setAttribute('readonly', '');
       el.style.position = 'absolute';
@@ -489,11 +524,14 @@
         octocat.classList.remove("animate");
       });
 
-      var buttons = document.querySelector("#show-buttons-code");
-      var codeButtons = document.querySelector("#code-buttons");
-      buttons.addEventListener("click", function() {
-        codeButtons.style.display = codeButtons.style.display === 'block' ? 'none' : 'block';
-      });
+      var elements = ['buttons', 'containers', 'radios'];
+      for (var i = 0; i < elements.length; i++) {
+        let showEl = document.querySelector("#show-" + elements[i] + "-code");
+        let codeEl = document.querySelector("#code-" + elements[i]);
+        showEl.addEventListener("click", function() {
+          codeEl.style.display = codeEl.style.display === 'block' ? 'none' : 'block';
+        }, false);
+      }
     }
   </script>
 </html>
diff --git a/style.css b/style.css
index bfb67af..6794c4b 100644
--- a/style.css
+++ b/style.css
@@ -106,8 +106,8 @@ div.containers > .nes-container {
   height: 34px;
   width: 43px;
   position: absolute;
-  right: -5px;
-  top: -5px;
+  right: -4px;
+  top: -4px;
 }
 
 .copy {

From ba3bd786a0b38e9fe1f6e00c7223153e37a1140e Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 6 Feb 2019 22:56:12 -0200
Subject: [PATCH 04/14] feat(index.html): add the rest of the components

Added the rest of the components and some responsive design - ref #269
---
 index.html | 637 +++++++++++++++++++++++++++++++++++++++++++----------
 style.css  |  81 +++++--
 2 files changed, 578 insertions(+), 140 deletions(-)

diff --git a/index.html b/index.html
index 77d588e..64b8c10 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="./css/nes.min.css" rel="stylesheet" />
+    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
@@ -53,6 +53,7 @@
         <button type="button" class="nes-btn is-disabled">Disabled</button>
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-buttons">
       <code>
@@ -85,6 +86,7 @@
         </div>
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-containers-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
     </section>
     <section class="nes-container code" id="code-containers">
       <code>
@@ -118,6 +120,7 @@
         </label>
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-radios-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
     </section>
     <section class="nes-container code" id="code-radios">
       <code>
@@ -135,16 +138,36 @@
 
     <section class="nes-container with-title">
       <h2 class="title">Checkboxes</h2>
-      <label>
-        <input type="checkbox" class="nes-checkbox" checked />
-        <span>Enable</span>
-      </label>
+      <div id="checkboxes">
+        <label>
+          <input type="checkbox" class="nes-checkbox" checked />
+          <span>Enable</span>
+        </label>
+        <label>
+          <input type="checkbox" class="nes-checkbox is-dark" checked />
+          <span>Dark</span>
+        </label>
+      </div>
       <button type="button" class="nes-btn is-error show-code" id="show-checkboxes-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-checkboxes">
+      <code>
+        <p><span><</span>label>
+          <span><</span>input type="checkbox" class="nes-checkbox" checked />
+          <span><</span>span>Enable<span><</span>/span>
+        <span><</span>/label></p>
+        <p><span><</span>label>
+          <span><</span>input type="checkbox" class="nes-checkbox is-dark" checked />
+          <span><</span>span>Dark<span><</span>/span>
+        <span><</span>/label></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Avatars</h2>
-      <div>
+      <div id="avatars">
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">
         <img src="https://www.gravatar.com/avatar" class="nes-avatar">
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">
@@ -155,68 +178,141 @@
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-avatars-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-avatars">
+      <code>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-small"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-large"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded"></p>
+        <p><p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded"></p>
+        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
+      </code>
     </section>
 
     <section class="form nes-container with-title">
       <h2 class="title">Form</h2>
-      <div class="nes-field">
-        <label for="name_field">Your name</label>
-        <input type="text" id="name_field" class="nes-input">
-      </div>
-      <div class="nes-field is-inline">
-        <label for="inline_field">.input.is-success</label>
-        <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
-      </div>
-      <div class="nes-field is-inline">
-        <label for="warning_field">.input.is-warning</label>
-        <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
-      </div>
-      <div class="nes-field is-inline">
-        <label for="error_field">.input.is-error</label>
-        <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
-      </div>
-      <div class="field">
-        <label for="textarea_field">Textarea</label>
-        <textarea id="textarea_field" class="nes-textarea"></textarea>
-      </div>
-      <div class="field">
-        <label for="selects">Select</label>
-        <div id="selects" class="selects">
-          <div class="nes-select">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>
-          <div class="nes-select is-success">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>
-          <div class="nes-select is-warning">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>
-          <div class="nes-select is-error">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
+      <div id="form">
+        <div class="nes-field">
+          <label for="name_field">Your name</label>
+          <input type="text" id="name_field" class="nes-input">
+        </div>
+        <div class="nes-field is-inline">
+          <label for="inline_field">.input.is-success</label>
+          <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
+        </div>
+        <div class="nes-field is-inline">
+          <label for="warning_field">.input.is-warning</label>
+          <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
+        </div>
+        <div class="nes-field is-inline">
+          <label for="error_field">.input.is-error</label>
+          <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
+        </div>
+        <div class="field">
+          <label for="textarea_field">Textarea</label>
+          <textarea id="textarea_field" class="nes-textarea"></textarea>
+        </div>
+        <div class="field">
+          <label for="selects">Select</label>
+          <div id="selects" class="selects">
+            <div class="nes-select">
+              <select required>
+                <option value="" disabled selected hidden>Select...</option>
+                <option value="0">To be</option>
+                <option value="1">Not to be</option>
+              </select>
+            </div>
+            <div class="nes-select is-success">
+              <select required>
+                <option value="" disabled selected hidden>Select...</option>
+                <option value="0">To be</option>
+                <option value="1">Not to be</option>
+              </select>
+            </div>
+            <div class="nes-select is-warning">
+              <select required>
+                <option value="" disabled selected hidden>Select...</option>
+                <option value="0">To be</option>
+                <option value="1">Not to be</option>
+              </select>
+            </div>
+            <div class="nes-select is-error">
+              <select required>
+                <option value="" disabled selected hidden>Select...</option>
+                <option value="0">To be</option>
+                <option value="1">Not to be</option>
+              </select>
+            </div>
           </div>
         </div>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-form-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-form">
+      <code>
+        <p><span><</span>div class="nes-field">
+          <span><</span>label for="name_field">Your name<span><</span>/label>
+          <span><</span>input type="text" id="name_field" class="nes-input">
+        <span><</span>/div></p>
+        <p><span><</span>div class="nes-field is-inline">
+          <span><</span>label for="inline_field">.input.is-success<span><</span>/label>
+          <span><</span>input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
+        <span><</span>/div></p>
+        <p><span><</span>div class="nes-field is-inline">
+          <span><</span>label for="warning_field">.input.is-warning<span><</span>/label>
+          <span><</span>input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
+        <span><</span>/div></p>
+        <p><span><</span>div class="nes-field is-inline">
+          <span><</span>label for="error_field">.input.is-error<span><</span>/label>
+          <span><</span>input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
+        <span><</span>/div></p>
+        <p><span><</span>div class="field">
+          <span><</span>label for="textarea_field">Textarea<span><</span>/label>
+          <span><</span>textarea id="textarea_field" class="nes-textarea"><span><</span>/textarea>
+        <span><</span>/div></p>
+
+        <p><span><</span>div id="selects" class="selects">
+          <span><</span>div class="nes-select">
+            <span><</span>select required>
+              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
+              <span><</span>option value="0">To be<span><</span>/option>
+              <span><</span>option value="1">Not to be<span><</span>/option>
+            <span><</span>/select>
+          <span><</span>/div></p>
+        <p><span><</span>div class="nes-select is-success">
+            <span><</span>select required>
+              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
+              <span><</span>option value="0">To be<span><</span>/option>
+              <span><</span>option value="1">Not to be<span><</span>/option>
+            <span><</span>/select>
+          <span><</span>/div></p>
+        <p><span><</span>div class="nes-select is-warning">
+            <span><</span>select required>
+              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
+              <span><</span>option value="0">To be<span><</span>/option>
+              <span><</span>option value="1">Not to be<span><</span>/option>
+            <span><</span>/select>
+          <span><</span>/div></p>
+        <p><span><</span>div class="nes-select is-error">
+            <span><</span>select required>
+              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
+              <span><</span>option value="0">To be<span><</span>/option>
+              <span><</span>option value="1">Not to be<span><</span>/option>
+            <span><</span>/select>
+          <span><</span>/div></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
+      </code>
     </section>
 
     <section class="balloon nes-container with-title">
       <h2 class="title">Balloons</h2>
-      <div class="messages">
+      <div class="messages" id="balloons">
         <div class="message -left">
           <i class="nes-bcrikko"></i>
           <div class="nes-balloon from-left">
@@ -230,32 +326,77 @@
           <i class="nes-bcrikko"></i>
         </div>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-balloons-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-balloons">
+      <code>
+        <p><span><</span>div class="message -left">
+          <span><</span>i class="nes-bcrikko"><span><</span>/i>
+          <span><</span>div class="nes-balloon from-left">
+            <span><</span>p>Hello NES.css<span><</span>/p>
+          <span><</span>/div>
+        <span><</span>/div></p>
+        <p><span><</span>div class="message -right">
+          <span><</span>div class="nes-balloon from-right">
+            <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
+          <span><</span>/div>
+          <span><</span>i class="nes-bcrikko"><span><</span>/i>
+        <span><</span>/div></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Lists</h2>
-      <div class="lists">
-        <ul class="nes-list is-disc">
-          <li>Good morning.</li>
-          <li>Thou hast had a good night's sleep, I hope.</li>
-          <li>Thou hast had a good afternoon</li>
-          <li>Good night.</li>
-        </ul>
-      </div>
+      <div id="lists">
+        <div class="lists">
+          <ul class="nes-list is-disc">
+            <li>Good morning.</li>
+            <li>Thou hast had a good night's sleep, I hope.</li>
+            <li>Thou hast had a good afternoon</li>
+            <li>Good night.</li>
+          </ul>
+        </div>
 
-      <div class="lists">
-        <ul class="nes-list is-circle">
-          <li>Good morning.</li>
-          <li>Thou hast had a good night's sleep, I hope.</li>
-          <li>Thou hast had a good afternoon</li>
-          <li>Good night.</li>
-        </ul>
+        <div class="lists">
+          <ul class="nes-list is-circle">
+            <li>Good morning.</li>
+            <li>Thou hast had a good night's sleep, I hope.</li>
+            <li>Thou hast had a good afternoon</li>
+            <li>Good night.</li>
+          </ul>
+        </div>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-lists-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-lists">
+      <code>
+        <p><span><</span>div class="lists">
+          <span><</span>ul class="nes-list is-disc">
+            <span><</span>li>Good morning.<span><</span>/li>
+            <span><</span>li>Thou hast had a good night's sleep, I hope.<span><</span>/li>
+            <span><</span>li>Thou hast had a good afternoon<span><</span>/li>
+            <span><</span>li>Good night.<span><</span>/li>
+          <span><</span>/ul>
+        <span><</span>/div></p>
+
+        <p><span><</span>div class="lists">
+          <span><</span>ul class="nes-list is-circle">
+            <span><</span>li>Good morning.<span><</span>/li>
+            <span><</span>li>Thou hast had a good night's sleep, I hope.<span><</span>/li>
+            <span><</span>li>Thou hast had a good afternoon<span><</span>/li>
+            <span><</span>li>Good night.<span><</span>/li>
+          <span><</span>/ul>
+        <span><</span>/div></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Table</h2>
-      <div class="nes-table-responsive">
+      <div class="nes-table-responsive" id="table">
         <table class="nes-table is-bordered is-centered">
           <thead>
             <tr>
@@ -307,60 +448,175 @@
           </tbody>
         </table>
       </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-table-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-table">
+      <code>
+        <p><span><</span>div class="nes-table-responsive">
+        <span><</span>table class="nes-table is-bordered is-centered">
+          <span><</span>thead>
+            <span><</span>tr>
+              <span><</span>th>Table.is-bordered<span><</span>/th>
+              <span><</span>th>Table.is-centered<span><</span>/th>
+              <span><</span>th>Table.is-centered<span><</span>/th>
+              <span><</span>th>Table.is-centered<span><</span>/th>
+            <span><</span>/tr>
+          <span><</span>/thead>
+          <span><</span>tbody>
+            <span><</span>tr>
+              <span><</span>td>Thou hast had a good morning<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
+              <span><</span>td>Thou hast had a good evening<span><</span>/td>
+              <span><</span>td>Thou hast had a good night<span><</span>/td>
+            <span><</span>/tr>
+            <span><</span>tr>
+              <span><</span>td>Thou hast had a good morning<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
+              <span><</span>td>Thou hast had a good evening<span><</span>/td>
+              <span><</span>td>Thou hast had a good night<span><</span>/td>
+            <span><</span>/tr>
+          <span><</span>/tbody>
+        <span><</span>/table>
+      <span><</span>/div></p>
+      <p><span><</span>div class="nes-table-responsive">
+        <span><</span>table class="nes-table is-bordered is-dark">
+          <span><</span>thead>
+            <span><</span>tr>
+              <span><</span>th>Table.is-dark<span><</span>/th>
+              <span><</span>th>Table.is-bordered<span><</span>/th>
+              <span><</span>th>Table.is-bordered<span><</span>/th>
+              <span><</span>th>Table.is-bordered<span><</span>/th>
+            <span><</span>/tr>
+          <span><</span>/thead>
+          <span><</span>tbody>
+            <span><</span>tr>
+              <span><</span>td>Thou hast had a good morning<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternon<span><</span>/td>
+              <span><</span>td>Thou hast had a good evening<span><</span>/td>
+              <span><</span>td>Thou hast had a good night<span><</span>/td>
+            <span><</span>/tr>
+            <span><</span>tr>
+              <span><</span>td>Thou hast had a good morning<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
+              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
+            <span><</span>/tr>
+          <span><</span>/tbody>
+        <span><</span>/table></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Progress</h2>
-      <progress class="nes-progress" value="90" max="100"></progress>
-      <progress class="nes-progress is-primary" value="80" max="100"></progress>
-      <progress class="nes-progress is-success" value="50" max="100"></progress>
-      <progress class="nes-progress is-warning" value="30" max="100"></progress>
-      <progress class="nes-progress is-error" value="10" max="100"></progress>
-      <progress class="nes-progress is-pattern" value="50" max="100"></progress>
+      <div id="progress">
+        <progress class="nes-progress" value="90" max="100"></progress>
+        <progress class="nes-progress is-primary" value="80" max="100"></progress>
+        <progress class="nes-progress is-success" value="50" max="100"></progress>
+        <progress class="nes-progress is-warning" value="30" max="100"></progress>
+        <progress class="nes-progress is-error" value="10" max="100"></progress>
+        <progress class="nes-progress is-pattern" value="50" max="100"></progress>
+      </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-progress-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-progress">
+      <code>
+        <p><span><</span>progress class="nes-progress" value="90" max="100"><span><</span>/progress></p>
+        <p><span><</span>progress class="nes-progress is-primary" value="80" max="100"><span><</span>/progress></p>
+        <p><span><</span>progress class="nes-progress is-success" value="50" max="100"><span><</span>/progress></p>
+        <p><span><</span>progress class="nes-progress is-warning" value="30" max="100"><span><</span>/progress></p>
+        <p><span><</span>progress class="nes-progress is-error" value="10" max="100"><span><</span>/progress></p>
+        <p><span><</span>progress class="nes-progress is-pattern" value="50" max="100"><span><</span>/progress></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
+      </code>
     </section>
 
-    <section class="nes-container with-title">
+    <section class="nes-container with-title" class="badges">
       <h2 class="title">Badges</h2>
-      <a href="#" class="nes-badge">
-          <span class="is-dark">NES.css</span>
-      </a>
-      <a href="#" class="nes-badge">
-          <span class="is-primary">is</span>
-      </a>
-      <a href="#" class="nes-badge">
-          <span class="is-success">a</span>
-      </a>
-      <a href="#" class="nes-badge">
-          <span class="is-warning">great</span>
-      </a>
-      <a href="#" class="nes-badge">
-          <span class="is-error">framework!</span>
-      </a>
-      <a href="#" class="nes-badge is-splited">
-          <span class="is-dark">npm</span>
-          <span class="is-primary">1.1.0</span>
-      </a>
-      <a href="#" class="nes-badge is-splited">
-          <span class="is-dark">test</span>
-          <span class="is-success">100%</span>
-      </a>
-      <a href="#" class="nes-badge is-icon">
-          <span class="is-warning">
-              <i class="nes-icon star is-small"></i>
-          </span>
-          <span class="is-primary">Icons</span>
-      </a>
-      <a href="#" class="nes-badge is-icon">
-          <span class="is-dark">hi</span>
-          <span class="is-warning">Text</span>
-      </a>
+      <div id="badges">
+        <a href="#" class="nes-badge">
+            <span class="is-dark">NES.css</span>
+        </a>
+        <a href="#" class="nes-badge">
+            <span class="is-primary">is</span>
+        </a>
+        <a href="#" class="nes-badge">
+            <span class="is-success">a</span>
+        </a>
+        <a href="#" class="nes-badge">
+            <span class="is-warning">great</span>
+        </a>
+        <a href="#" class="nes-badge">
+            <span class="is-error">framework!</span>
+        </a>
+        <a href="#" class="nes-badge is-splited">
+            <span class="is-dark">npm</span>
+            <span class="is-primary">1.1.0</span>
+        </a>
+        <a href="#" class="nes-badge is-splited">
+            <span class="is-dark">test</span>
+            <span class="is-success">100%</span>
+        </a>
+        <a href="#" class="nes-badge is-icon">
+            <span class="is-warning">
+                <i class="nes-icon star is-small"></i>
+            </span>
+            <span class="is-primary">Icons</span>
+        </a>
+        <a href="#" class="nes-badge is-icon">
+            <span class="is-dark">hi</span>
+            <span class="is-warning">Text</span>
+        </a>
+      </div>
+      <button type="button" class="nes-btn is-error show-code" id="show-badges-code"><></button>
+      <span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
+    </section>
+    <section class="nes-container code" id="code-badges">
+      <code>
+        <p><span><</span>a href="#" class="nes-badge">
+            <span><</span>span class="is-dark">NES.css<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge">
+            <span><</span>span class="is-primary">is<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge">
+            <span><</span>span class="is-success">a<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge">
+            <span><</span>span class="is-warning">great<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge">
+            <span><</span>span class="is-error">framework!<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge is-splited">
+            <span><</span>span class="is-dark">npm<span><</span>/span>
+            <span><</span>span class="is-primary">1.1.0<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge is-splited">
+            <span><</span>span class="is-dark">test<span><</span>/span>
+            <span><</span>span class="is-success">100%<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge is-icon">
+            <span><</span>span class="is-warning">
+                <span><</span>i class="nes-icon star is-small"><span><</span>/i>
+            <span><</span>/span>
+            <span><</span>span class="is-primary">Icons<span><</span>/span>
+        <span><</span>/a></p>
+        <p><span><</span>a href="#" class="nes-badge is-icon">
+            <span><</span>span class="is-dark">hi<span><</span>/span>
+            <span><</span>span class="is-warning">Text<span><</span>/span>
+        <span><</span>/a></p>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
+      </code>
     </section>
 
     <section class="nes-container with-title">
       <h2 class="title">Icons</h2>
       <section class="nes-container with-title">
         <h3 class="title">Reaction</h3>
-        <div>
+        <div id="reaction">
           <i class="nes-icon heart is-small"></i>
           <i class="nes-icon heart"></i>
           <i class="nes-icon heart is-medium"></i>
@@ -390,10 +646,46 @@
           <i class="nes-icon like is-large"></i>
           <i class="nes-icon like is-empty"></i>
         </div>
+        <button type="button" class="nes-btn is-error show-code" id="show-reaction-code"><></button>
+        <span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
       </section>
+      <section class="nes-container code" id="code-reaction">
+        <code>
+          <p><span><</span>i class="nes-icon heart is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon heart"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon heart is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon heart is-large"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon heart is-empty"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon star is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon star is-half is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-half"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-half is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-half is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon star is-transparent is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-transparent"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-transparent is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon star is-transparent is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon star is-empty"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon like is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon like"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon like is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon like is-large"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon like is-empty"><span><</span>/i></p>
+          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
+        </code>
+      </section>
+
       <section class="nes-container with-title">
         <h3 class="title">SNS</h3>
-        <div>
+        <div id="sns">
           <i class="nes-icon twitter is-small"></i>
           <i class="nes-icon twitter"></i>
           <i class="nes-icon twitter is-medium"></i>
@@ -449,11 +741,72 @@
           <i class="nes-icon linkedin is-medium"></i>
           <i class="nes-icon linkedin is-large"></i>
         </div>
+        <button type="button" class="nes-btn is-error show-code" id="show-sns-code"><></button>
+        <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
+      </section>
+      <section class="nes-container code" id="code-sns">
+        <code>
+          <p><span><</span>i class="nes-icon twitter is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitter"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitter is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitter is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon facebook is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon facebook"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon facebook is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon facebook is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon github is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon github"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon github is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon github is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon youtube is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon youtube"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon youtube is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon youtube is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon google is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon google"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon google is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon google is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon medium is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon medium is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon medium is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon twitch is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitch"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitch is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon twitch is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon reddit is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon reddit"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon reddit is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon reddit is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon whatsapp is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon whatsapp"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon whatsapp is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon whatsapp is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon gmail is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon gmail"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon gmail is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon gmail is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon linkedin is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon linkedin"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon linkedin is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon linkedin is-large"><span><</span>/i></p>
+          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
+        </code>
       </section>
 
       <section class="nes-container with-title">
         <h3 class="title">Others</h3>
-        <div>
+        <div id="others">
           <i class="nes-icon close is-small"></i>
           <i class="nes-icon close"></i>
           <i class="nes-icon close is-medium"></i>
@@ -478,20 +831,60 @@
           <i class="nes-phone"></i>
           <i class="nes-kirby"></i>
         </div>
+        <button type="button" class="nes-btn is-error show-code" id="show-others-code"><></button>
+        <span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
+      </section>
+      <section class="nes-container code" id="code-others">
+        <code>
+          <p><span><</span>i class="nes-icon close is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon close"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon close is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon close is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-octocat animate"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-icon trophy is-small"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon trophy"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon trophy is-medium"><span><</span>/i></p>
+          <p><span><</span>i class="nes-icon trophy is-large"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-mario"><span><</span>/i></p>
+          <p><span><</span>i class="nes-ash"><span><</span>/i></p>
+          <p><span><</span>i class="nes-pokeball"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-bulbasaur"><span><</span>/i></p>
+          <p><span><</span>i class="nes-charmander"><span><</span>/i></p>
+          <p><span><</span>i class="nes-squirtle"><span><</span>/i></p>
+
+          <p><span><</span>i class="nes-smartphone"><span><</span>/i></p>
+          <p><span><</span>i class="nes-phone"><span><</span>/i></p>
+          <p><span><</span>i class="nes-kirby"><span><</span>/i></p>
+          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
+        </code>
       </section>
 
       <section class="nes-container with-title">
         <h3 class="title">Controllers</h3>
-        <div>
+        <div id="controllers">
           <i class="nes-logo"></i>
           <i class="nes-jp-logo"></i>
           <i class="snes-logo"></i>
           <i class="snes-jp-logo"></i>
         </div>
+        <button type="button" class="nes-btn is-error show-code" id="show-controllers-code"><></button>
+        <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
+      </section>
+      <section class="nes-container code" id="code-controllers">
+        <code>
+          <p><span><</span>i class="nes-logo"><span><</span>/i></p>
+          <p><span><</span>i class="nes-jp-logo"><span><</span>/i></p>
+          <p><span><</span>i class="snes-logo"><span><</span>/i></p>
+          <p><span><</span>i class="snes-jp-logo"><span><</span>/i></p>
+          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
+        </code>
       </section>
     </section>
 
-
     <footer class="footer">
       <p>
         <a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a>
@@ -512,6 +905,11 @@
       el.select();
       document.execCommand('copy');
       document.body.removeChild(el);
+      let copiedEl = document.querySelector("#copied-" + element);
+      copiedEl.style.display = 'block'
+      setTimeout(function() {
+        copiedEl.style.display = 'none'
+      }, 2000);
     }
 
     window.onload = function() {
@@ -524,7 +922,8 @@
         octocat.classList.remove("animate");
       });
 
-      var elements = ['buttons', 'containers', 'radios'];
+      var elements = ['buttons', 'containers', 'radios', 'checkboxes', 'avatars', 'form',
+        'balloons', 'lists', 'table', 'progress', 'badges', 'reaction', 'sns', 'others', 'controllers'];
       for (var i = 0; i < elements.length; i++) {
         let showEl = document.querySelector("#show-" + elements[i] + "-code");
         let codeEl = document.querySelector("#code-" + elements[i]);
diff --git a/style.css b/style.css
index 6794c4b..bd24ec3 100644
--- a/style.css
+++ b/style.css
@@ -87,6 +87,59 @@ div.containers > .nes-container {
   align-self: flex-end;
 }
 
+.show-code {
+  font-size: .7em;
+  height: 34px;
+  display: flex;
+  justify-content: center;
+  width: 40px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+}
+
+.code {
+  display: none;
+  font-size: .85em;
+  color: #e76e55;
+  background-color: rgba(45, 45, 45, .9);
+  padding: 15px 0px 0px 15px;
+  margin-top: -20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.copy {
+  height: 34px;
+  width: 58px;
+}
+
+#form .nes-field, #form .field {
+  margin-top: 20px;
+}
+
+.copied {
+  position: absolute;
+  bottom: 25px;
+  padding: 10px;
+  font-size: .7em;
+  z-index: 2;
+  right: 35px;
+  color: #000;
+  display: none;
+}
+
+.balloon .copied {
+  bottom: -4px;
+  right: 10px;
+}
+
+@media screen and (max-width: 1280px) {
+  .code p:first-child {
+    padding-top: 2.7em;
+  }
+}
+
 @media screen and (max-width: 768px) {
   body {
     padding: 0;
@@ -99,27 +152,13 @@ div.containers > .nes-container {
   .github-link {
     display: none;
   }
-}
 
-.show-code {
-  font-size: .7em;
-  height: 34px;
-  width: 43px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
-}
+  .code p {
+    font-size: .8em;
+  }
 
-.copy {
-  height: 34px;
-  width: 58px;
-}
-
-.code {
-  display: none;
-  font-size: .8em;
-  color: #e76e55;
-  background-color: rgba(45, 45, 45, .9);
-  padding: 15px 0 0px 10px;
-  margin-top: -20px;
+  #code-avatars p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

From f0f060052f4a40bf84c37af9353c52aaaeffc523 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 6 Feb 2019 23:01:09 -0200
Subject: [PATCH 05/14] feat(index.html): add margin to progress and table.

---
 style.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/style.css b/style.css
index bd24ec3..11cb5a9 100644
--- a/style.css
+++ b/style.css
@@ -56,6 +56,14 @@ div.containers > .nes-container {
   margin-bottom: 1rem;
 }
 
+#table {
+  margin: 35px auto;
+}
+
+#progress {
+  margin-top: 35px;
+}
+
 .footer {
   text-align: center;
 }

From d9de7c95b5750a2e4b5acdfd096c05fb7adeeaeb Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Wed, 6 Feb 2019 23:04:31 -0200
Subject: [PATCH 06/14] feat(index.html): modified width of the tag p

---
 style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/style.css b/style.css
index 11cb5a9..17ca9c3 100644
--- a/style.css
+++ b/style.css
@@ -142,9 +142,14 @@ div.containers > .nes-container {
   right: 10px;
 }
 
+.code p {
+  width: 96%;
+}
+
 @media screen and (max-width: 1280px) {
   .code p:first-child {
     padding-top: 2.7em;
+    width: 99%;
   }
 }
 
@@ -163,6 +168,7 @@ div.containers > .nes-container {
 
   .code p {
     font-size: .8em;
+    width: 100%;
   }
 
   #code-avatars p {

From 18e4eca301ec14e1a7d591d55b6da038fb9cb8d3 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <igor.lima@sabium.com.br>
Date: Thu, 7 Feb 2019 12:51:17 -0200
Subject: [PATCH 07/14] feat(index.html): changed <span> and </span> to &lt e
 &gt.

---
 index.html | 600 ++++++++++++++++++++++++++---------------------------
 1 file changed, 300 insertions(+), 300 deletions(-)

diff --git a/index.html b/index.html
index 64b8c10..326e7e2 100644
--- a/index.html
+++ b/index.html
@@ -57,12 +57,12 @@
     </section>
     <section class="nes-container code" id="code-buttons">
       <code>
-        <p><span><</span>button type="button" class="nes-btn">Normal<span><</span>/button></p>
-        <p><span><</span>button type="button" class="nes-btn is-primary">Primary<span><</span>/button></p>
-        <p><span><</span>button type="button" class="nes-btn is-success">Success<span><</span>/button></p>
-        <p><span><</span>button type="button" class="nes-btn is-warning">Warning<span><</span>/button></p>
-        <p><span><</span>button type="button" class="nes-btn is-error">Error<span><</span>/button></p>
-        <p><span><</span>button type="button" class="nes-btn is-disabled">Disabled<span><</span>/button></p>
+        <p>&lt;button type="button" class="nes-btn"&gt;Normal&lt;/button&gt;</p>
+        <p>&lt;button type="button" class="nes-btn is-primary"&gt;Primary&lt;/button&gt;</p>
+        <p>&lt;button type="button" class="nes-btn is-success"&gt;Success&lt;/button&gt;</p>
+        <p>&lt;button type="button" class="nes-btn is-warning"&gt;Warning&lt;/button&gt;</p>
+        <p>&lt;button type="button" class="nes-btn is-error"&gt;Error&lt;/button&gt;</p>
+        <p>&lt;button type="button" class="nes-btn is-disabled"&gt;Disabled&lt;/button&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
       </code>
     </section>
@@ -90,20 +90,20 @@
     </section>
     <section class="nes-container code" id="code-containers">
       <code>
-        <p><span><</span>div class="nes-container with-title is-centered">
-          <span><</span>p class="title">Container.is-centered<span><</span>/p>
-          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
-        <span><</span>/div></p>
-        <p><span><</span>div class="nes-container is-dark with-title">
-          <span><</span>p class="title">Container.is-dark<span><</span>/p>
-          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
-        <span><</span>/div></p>
-        <p><span><</span>div class="nes-container is-rounded">
-          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
-        <span><</span>/div>
-        <p><span><</span>div class="nes-container is-rounded is-dark">
-          <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
-        <span><</span>/div>
+        <p>&lt;div class="nes-container with-title is-centered"&gt;
+          &lt;p class="title"&gt;Container.is-centered&lt;/p&gt;
+          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="nes-container is-dark with-title"&gt;
+          &lt;p class="title"&gt;Container.is-dark&lt;/p&gt;
+          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="nes-container is-rounded"&gt;
+          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+        &lt;/div&gt;
+        <p>&lt;div class="nes-container is-rounded is-dark"&gt;
+          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+        &lt;/div&gt;
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
       </code>
     </section>
@@ -124,14 +124,14 @@
     </section>
     <section class="nes-container code" id="code-radios">
       <code>
-        <p><span><</span>label>
-          <span><</span>input type="radio" class="nes-radio" name="answer" checked />
-          <span><</span>span>Yes<span><</span>/span>
-        <span><</span>/label></p>
-        <p><span><</span>label>
-          <span><</span>input type="radio" class="nes-radio" name="answer" />
-          <span><</span>span>No<span><</span>/span>
-        <span><</span>/label></p>
+        <p>&lt;label&gt;
+          &lt;input type="radio" class="nes-radio" name="answer" checked /&gt;
+          &lt;span&gt;Yes&lt;/span&gt;
+        &lt;/label&gt;</p>
+        <p>&lt;label&gt;
+          &lt;input type="radio" class="nes-radio" name="answer" /&gt;
+          &lt;span&gt;No&lt;/span&gt;
+        &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
       </code>
     </section>
@@ -153,14 +153,14 @@
     </section>
     <section class="nes-container code" id="code-checkboxes">
       <code>
-        <p><span><</span>label>
-          <span><</span>input type="checkbox" class="nes-checkbox" checked />
-          <span><</span>span>Enable<span><</span>/span>
-        <span><</span>/label></p>
-        <p><span><</span>label>
-          <span><</span>input type="checkbox" class="nes-checkbox is-dark" checked />
-          <span><</span>span>Dark<span><</span>/span>
-        <span><</span>/label></p>
+        <p>&lt;label&gt;
+          &lt;input type="checkbox" class="nes-checkbox" checked /&gt;
+          &lt;span>Enable&lt;/span&gt;
+        &lt;/label&gt;</p>
+        <p>&lt;label&gt;
+          &lt;input type="checkbox" class="nes-checkbox is-dark" checked /&gt;
+          &lt;span&gt;Dark&lt;/span&gt;
+        &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
       </code>
     </section>
@@ -182,14 +182,14 @@
     </section>
     <section class="nes-container code" id="code-avatars">
       <code>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-small"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-large"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded"></p>
-        <p><p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded"></p>
-        <p><span><</span>img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"></p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-small"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-large"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded"&gt;</p>
+        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
       </code>
     </section>
@@ -256,56 +256,56 @@
     </section>
     <section class="nes-container code" id="code-form">
       <code>
-        <p><span><</span>div class="nes-field">
-          <span><</span>label for="name_field">Your name<span><</span>/label>
-          <span><</span>input type="text" id="name_field" class="nes-input">
-        <span><</span>/div></p>
-        <p><span><</span>div class="nes-field is-inline">
-          <span><</span>label for="inline_field">.input.is-success<span><</span>/label>
-          <span><</span>input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
-        <span><</span>/div></p>
-        <p><span><</span>div class="nes-field is-inline">
-          <span><</span>label for="warning_field">.input.is-warning<span><</span>/label>
-          <span><</span>input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
-        <span><</span>/div></p>
-        <p><span><</span>div class="nes-field is-inline">
-          <span><</span>label for="error_field">.input.is-error<span><</span>/label>
-          <span><</span>input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
-        <span><</span>/div></p>
-        <p><span><</span>div class="field">
-          <span><</span>label for="textarea_field">Textarea<span><</span>/label>
-          <span><</span>textarea id="textarea_field" class="nes-textarea"><span><</span>/textarea>
-        <span><</span>/div></p>
+        <p>&lt;div class="nes-field"&gt;
+          &lt;label for="name_field"&gt;Your name&lt;/label&gt;
+          &lt;input type="text" id="name_field" class="nes-input"&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="nes-field is-inline"&gt;
+          &lt;label for="inline_field"&gt;.input.is-success&lt;/label&gt;
+          &lt;input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css"&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="nes-field is-inline"&gt;
+          &lt;label for="warning_field"&gt;.input.is-warning&lt;/label&gt;
+          &lt;input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css"&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="nes-field is-inline"&gt;
+          &lt;label for="error_field"&gt;.input.is-error&lt;/label&gt;
+          &lt;input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css"&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="field"&gt;
+          &lt;label for="textarea_field"&gt;Textarea&lt;/label&gt;
+          &lt;textarea id="textarea_field" class="nes-textarea"&gt;&lt;/textarea&gt;
+        &lt;/div&gt;</p>
 
-        <p><span><</span>div id="selects" class="selects">
-          <span><</span>div class="nes-select">
-            <span><</span>select required>
-              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
-              <span><</span>option value="0">To be<span><</span>/option>
-              <span><</span>option value="1">Not to be<span><</span>/option>
-            <span><</span>/select>
-          <span><</span>/div></p>
-        <p><span><</span>div class="nes-select is-success">
-            <span><</span>select required>
-              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
-              <span><</span>option value="0">To be<span><</span>/option>
-              <span><</span>option value="1">Not to be<span><</span>/option>
-            <span><</span>/select>
-          <span><</span>/div></p>
-        <p><span><</span>div class="nes-select is-warning">
-            <span><</span>select required>
-              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
-              <span><</span>option value="0">To be<span><</span>/option>
-              <span><</span>option value="1">Not to be<span><</span>/option>
-            <span><</span>/select>
-          <span><</span>/div></p>
-        <p><span><</span>div class="nes-select is-error">
-            <span><</span>select required>
-              <span><</span>option value="" disabled selected hidden>Select...<span><</span>/option>
-              <span><</span>option value="0">To be<span><</span>/option>
-              <span><</span>option value="1">Not to be<span><</span>/option>
-            <span><</span>/select>
-          <span><</span>/div></p>
+        <p>&lt;div id="selects" class="selects"&gt;
+          &lt;div class="nes-select"&gt;
+            &lt;select required&gt;
+              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value="0"&gt;To be&lt;/option&gt;
+              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+            &lt;/select&gt;
+          &lt;/div&gt;</p>
+        <p>&lt;div class="nes-select is-success"&gt;
+            &lt;select required&gt;
+              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value="0"&gt;To be&lt;/option&gt;
+              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+            &lt;/select&gt;
+          &lt;/div&gt;</p>
+        <p>&lt;div class="nes-select is-warning"&gt;
+            &lt;select required&gt;
+              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value="0"&gt;To be&lt;/option&gt;
+              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+            &lt;/select&gt;
+          &lt;/div&gt;</p>
+        <p>&lt;div class="nes-select is-error"&gt;
+            &lt;select required&gt;
+              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value="0"&gt;To be&lt;/option&gt;
+              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+            &lt;/select&gt;
+          &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
       </code>
     </section>
@@ -331,18 +331,18 @@
     </section>
     <section class="nes-container code" id="code-balloons">
       <code>
-        <p><span><</span>div class="message -left">
-          <span><</span>i class="nes-bcrikko"><span><</span>/i>
-          <span><</span>div class="nes-balloon from-left">
-            <span><</span>p>Hello NES.css<span><</span>/p>
-          <span><</span>/div>
-        <span><</span>/div></p>
-        <p><span><</span>div class="message -right">
-          <span><</span>div class="nes-balloon from-right">
-            <span><</span>p>Good morning. Thou hast had a good night's sleep, I hope.<span><</span>/p>
-          <span><</span>/div>
-          <span><</span>i class="nes-bcrikko"><span><</span>/i>
-        <span><</span>/div></p>
+        <p>&lt;div class="message -left"&gt;
+          &lt;i class="nes-bcrikko"&gt;&lt;/i&gt;
+          &lt;div class="nes-balloon from-left"&gt;
+            &lt;p&gt;Hello NES.css&lt;/p&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;</p>
+        <p>&lt;div class="message -right"&gt;
+          &lt;div class="nes-balloon from-right"&gt;
+            &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+          &lt;/div&gt;
+          &lt;i class="nes-bcrikko"&gt;&lt;/i&gt;
+        &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
       </code>
     </section>
@@ -373,23 +373,23 @@
     </section>
     <section class="nes-container code" id="code-lists">
       <code>
-        <p><span><</span>div class="lists">
-          <span><</span>ul class="nes-list is-disc">
-            <span><</span>li>Good morning.<span><</span>/li>
-            <span><</span>li>Thou hast had a good night's sleep, I hope.<span><</span>/li>
-            <span><</span>li>Thou hast had a good afternoon<span><</span>/li>
-            <span><</span>li>Good night.<span><</span>/li>
-          <span><</span>/ul>
-        <span><</span>/div></p>
+        <p>&lt;div class="lists"&gt;
+          &lt;ul class="nes-list is-disc"&gt;
+            &lt;li&gt;Good morning.&lt;/li&gt;
+            &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
+            &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
+            &lt;li&gt;Good night.&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/div&gt;</p>
 
-        <p><span><</span>div class="lists">
-          <span><</span>ul class="nes-list is-circle">
-            <span><</span>li>Good morning.<span><</span>/li>
-            <span><</span>li>Thou hast had a good night's sleep, I hope.<span><</span>/li>
-            <span><</span>li>Thou hast had a good afternoon<span><</span>/li>
-            <span><</span>li>Good night.<span><</span>/li>
-          <span><</span>/ul>
-        <span><</span>/div></p>
+        <p>&lt;div class="lists"&gt;
+          &lt;ul class="nes-list is-circle"&gt;
+            &lt;li&gt;Good morning.&lt;/li&gt;
+            &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
+            &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
+            &lt;li&gt;Good night.&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
       </code>
     </section>
@@ -453,57 +453,57 @@
     </section>
     <section class="nes-container code" id="code-table">
       <code>
-        <p><span><</span>div class="nes-table-responsive">
-        <span><</span>table class="nes-table is-bordered is-centered">
-          <span><</span>thead>
-            <span><</span>tr>
-              <span><</span>th>Table.is-bordered<span><</span>/th>
-              <span><</span>th>Table.is-centered<span><</span>/th>
-              <span><</span>th>Table.is-centered<span><</span>/th>
-              <span><</span>th>Table.is-centered<span><</span>/th>
-            <span><</span>/tr>
-          <span><</span>/thead>
-          <span><</span>tbody>
-            <span><</span>tr>
-              <span><</span>td>Thou hast had a good morning<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
-              <span><</span>td>Thou hast had a good evening<span><</span>/td>
-              <span><</span>td>Thou hast had a good night<span><</span>/td>
-            <span><</span>/tr>
-            <span><</span>tr>
-              <span><</span>td>Thou hast had a good morning<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
-              <span><</span>td>Thou hast had a good evening<span><</span>/td>
-              <span><</span>td>Thou hast had a good night<span><</span>/td>
-            <span><</span>/tr>
-          <span><</span>/tbody>
-        <span><</span>/table>
-      <span><</span>/div></p>
-      <p><span><</span>div class="nes-table-responsive">
-        <span><</span>table class="nes-table is-bordered is-dark">
-          <span><</span>thead>
-            <span><</span>tr>
-              <span><</span>th>Table.is-dark<span><</span>/th>
-              <span><</span>th>Table.is-bordered<span><</span>/th>
-              <span><</span>th>Table.is-bordered<span><</span>/th>
-              <span><</span>th>Table.is-bordered<span><</span>/th>
-            <span><</span>/tr>
-          <span><</span>/thead>
-          <span><</span>tbody>
-            <span><</span>tr>
-              <span><</span>td>Thou hast had a good morning<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternon<span><</span>/td>
-              <span><</span>td>Thou hast had a good evening<span><</span>/td>
-              <span><</span>td>Thou hast had a good night<span><</span>/td>
-            <span><</span>/tr>
-            <span><</span>tr>
-              <span><</span>td>Thou hast had a good morning<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
-              <span><</span>td>Thou hast had a good afternoon<span><</span>/td>
-            <span><</span>/tr>
-          <span><</span>/tbody>
-        <span><</span>/table></p>
+        <p>&lt;div class="nes-table-responsive"&gt;
+        &lt;table class="nes-table is-bordered is-centered"&gt;
+          &lt;thead&gt;
+            &lt;tr&gt;
+              &lt;th&gt;Table.is-bordered&lt;/th&gt;
+              &lt;th&gt;Table.is-centered&lt;/th&gt;
+              &lt;th&gt;Table.is-centered&lt;/th&gt;
+              &lt;th&gt;Table.is-centered&lt;/th&gt;
+            &lt;/tr&gt;
+          &lt;/thead&gt;
+          &lt;tbody&gt;
+            &lt;tr&gt;
+              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+            &lt;/tr&gt;
+          &lt;/tbody&gt;
+        &lt;/table&gt;
+      &lt;/div&gt;</p>
+      <p>&lt;div class="nes-table-responsive"&gt;
+        &lt;table class="nes-table is-bordered is-dark"&gt;
+          &lt;thead&gt;
+            &lt;tr&gt;
+              &lt;th&gt;Table.is-dark&lt;/th&gt;
+              &lt;th&gt;Table.is-bordered&lt;/th&gt;
+              &lt;th&gt;Table.is-bordered&lt;/th&gt;
+              &lt;th&gt;Table.is-bordered&lt;/th&gt;
+            &lt;/tr&gt;
+          &lt;/thead&gt;
+          &lt;tbody&gt;
+            &lt;tr&gt;
+              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternon&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+            &lt;/tr&gt;
+            &lt;tr&gt;
+              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+            &lt;/tr&gt;
+          &lt;/tbody&gt;
+        &lt;/table&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
       </code>
     </section>
@@ -523,12 +523,12 @@
     </section>
     <section class="nes-container code" id="code-progress">
       <code>
-        <p><span><</span>progress class="nes-progress" value="90" max="100"><span><</span>/progress></p>
-        <p><span><</span>progress class="nes-progress is-primary" value="80" max="100"><span><</span>/progress></p>
-        <p><span><</span>progress class="nes-progress is-success" value="50" max="100"><span><</span>/progress></p>
-        <p><span><</span>progress class="nes-progress is-warning" value="30" max="100"><span><</span>/progress></p>
-        <p><span><</span>progress class="nes-progress is-error" value="10" max="100"><span><</span>/progress></p>
-        <p><span><</span>progress class="nes-progress is-pattern" value="50" max="100"><span><</span>/progress></p>
+        <p>&lt;progress class="nes-progress" value="90" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class="nes-progress is-primary" value="80" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class="nes-progress is-success" value="50" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class="nes-progress is-warning" value="30" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class="nes-progress is-error" value="10" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class="nes-progress is-pattern" value="50" max="100"&gt;&lt;/progress&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
       </code>
     </section>
@@ -575,39 +575,39 @@
     </section>
     <section class="nes-container code" id="code-badges">
       <code>
-        <p><span><</span>a href="#" class="nes-badge">
-            <span><</span>span class="is-dark">NES.css<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge">
-            <span><</span>span class="is-primary">is<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge">
-            <span><</span>span class="is-success">a<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge">
-            <span><</span>span class="is-warning">great<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge">
-            <span><</span>span class="is-error">framework!<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge is-splited">
-            <span><</span>span class="is-dark">npm<span><</span>/span>
-            <span><</span>span class="is-primary">1.1.0<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge is-splited">
-            <span><</span>span class="is-dark">test<span><</span>/span>
-            <span><</span>span class="is-success">100%<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge is-icon">
-            <span><</span>span class="is-warning">
-                <span><</span>i class="nes-icon star is-small"><span><</span>/i>
-            <span><</span>/span>
-            <span><</span>span class="is-primary">Icons<span><</span>/span>
-        <span><</span>/a></p>
-        <p><span><</span>a href="#" class="nes-badge is-icon">
-            <span><</span>span class="is-dark">hi<span><</span>/span>
-            <span><</span>span class="is-warning">Text<span><</span>/span>
-        <span><</span>/a></p>
+        <p>&lt;a href="#" class="nes-badge"&gt;
+            &lt;span class="is-dark"&gt;NES.css&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge"&gt;
+            &lt;span class="is-primary"&gt;is&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge"&gt;
+            &lt;span class="is-success"&gt;a&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge"&gt;
+            &lt;span class="is-warning"&gt;great&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge"&gt;
+            &lt;span class="is-error"&gt;framework!&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge is-splited"&gt;
+            &lt;span class="is-dark"&gt;npm&lt;/span&gt;
+            &lt;span class="is-primary"&gt;1.1.0&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge is-splited"&gt;
+            &lt;span class="is-dark"&gt;test&lt;/span&gt;
+            &lt;span class="is-success"&gt;100%&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge is-icon"&gt;
+            &lt;span class="is-warning"&gt;
+                &lt;i class="nes-icon star is-small"&gt;&lt;/i&gt;
+            &lt;/span&gt;
+            &lt;span class="is-primary"&gt;Icons&lt;/span&gt;
+        &lt;/a&gt;</p>
+        <p>&lt;a href="#" class="nes-badge is-icon"&gt;
+            &lt;span class="is-dark"&gt;hi&lt;/span&gt;
+            &lt;span class="is-warning"&gt;Text&lt;/span&gt;
+        &lt;/a&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
       </code>
     </section>
@@ -651,34 +651,34 @@
       </section>
       <section class="nes-container code" id="code-reaction">
         <code>
-          <p><span><</span>i class="nes-icon heart is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon heart"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon heart is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon heart is-large"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon heart is-empty"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon heart is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon heart"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon heart is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon heart is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon heart is-empty"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon star is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon star is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon star is-half is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-half"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-half is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-half is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon star is-half is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-half"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-half is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-half is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon star is-transparent is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-transparent"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-transparent is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon star is-transparent is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon star is-transparent is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-transparent"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-transparent is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon star is-transparent is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon star is-empty"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon star is-empty"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon like is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon like"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon like is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon like is-large"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon like is-empty"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon like is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon like"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon like is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon like is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon like is-empty"&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
         </code>
       </section>
@@ -746,60 +746,60 @@
       </section>
       <section class="nes-container code" id="code-sns">
         <code>
-          <p><span><</span>i class="nes-icon twitter is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitter"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitter is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitter is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon twitter is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitter"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitter is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitter is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon facebook is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon facebook"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon facebook is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon facebook is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon facebook is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon facebook"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon facebook is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon facebook is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon github is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon github"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon github is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon github is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon github is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon github"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon github is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon github is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon youtube is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon youtube"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon youtube is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon youtube is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon youtube is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon youtube"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon youtube is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon youtube is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon google is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon google"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon google is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon google is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon google is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon google"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon google is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon google is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon medium is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon medium is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon medium is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon medium is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon medium is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon medium is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon twitch is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitch"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitch is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon twitch is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon twitch is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitch"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitch is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon twitch is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon reddit is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon reddit"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon reddit is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon reddit is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon reddit is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon reddit"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon reddit is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon reddit is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon whatsapp is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon whatsapp"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon whatsapp is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon whatsapp is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon whatsapp is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon whatsapp"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon whatsapp is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon whatsapp is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon gmail is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon gmail"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon gmail is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon gmail is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon gmail is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon gmail"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon gmail is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon gmail is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon linkedin is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon linkedin"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon linkedin is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon linkedin is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon linkedin is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon linkedin"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon linkedin is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon linkedin is-large"&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
         </code>
       </section>
@@ -836,29 +836,29 @@
       </section>
       <section class="nes-container code" id="code-others">
         <code>
-          <p><span><</span>i class="nes-icon close is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon close"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon close is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon close is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon close is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon close"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon close is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon close is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-octocat animate"><span><</span>/i></p>
+          <p>&lt;i class="nes-octocat animate"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-icon trophy is-small"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon trophy"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon trophy is-medium"><span><</span>/i></p>
-          <p><span><</span>i class="nes-icon trophy is-large"><span><</span>/i></p>
+          <p>&lt;i class="nes-icon trophy is-small"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon trophy"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon trophy is-medium"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-icon trophy is-large"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-mario"><span><</span>/i></p>
-          <p><span><</span>i class="nes-ash"><span><</span>/i></p>
-          <p><span><</span>i class="nes-pokeball"><span><</span>/i></p>
+          <p>&lt;i class="nes-mario"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-ash"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-pokeball"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-bulbasaur"><span><</span>/i></p>
-          <p><span><</span>i class="nes-charmander"><span><</span>/i></p>
-          <p><span><</span>i class="nes-squirtle"><span><</span>/i></p>
+          <p>&lt;i class="nes-bulbasaur"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-charmander"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-squirtle"&gt;&lt;/i&gt;</p>
 
-          <p><span><</span>i class="nes-smartphone"><span><</span>/i></p>
-          <p><span><</span>i class="nes-phone"><span><</span>/i></p>
-          <p><span><</span>i class="nes-kirby"><span><</span>/i></p>
+          <p>&lt;i class="nes-smartphone"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-phone"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-kirby"&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
         </code>
       </section>
@@ -876,10 +876,10 @@
       </section>
       <section class="nes-container code" id="code-controllers">
         <code>
-          <p><span><</span>i class="nes-logo"><span><</span>/i></p>
-          <p><span><</span>i class="nes-jp-logo"><span><</span>/i></p>
-          <p><span><</span>i class="snes-logo"><span><</span>/i></p>
-          <p><span><</span>i class="snes-jp-logo"><span><</span>/i></p>
+          <p>&lt;i class="nes-logo"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="nes-jp-logo"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="snes-logo"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class="snes-jp-logo"&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
         </code>
       </section>

From 0720887c9e9ae630655e17b581eee15eeebd40b6 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <igor.lima@sabium.com.br>
Date: Thu, 7 Feb 2019 12:53:49 -0200
Subject: [PATCH 08/14] feat(index.html): changed button <> to &lt;&gt;.

---
 index.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 326e7e2..04a18d4 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
         <button type="button" class="nes-btn is-error">Error</button>
         <button type="button" class="nes-btn is-disabled">Disabled</button>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-buttons-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-buttons-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-buttons">
@@ -85,7 +85,7 @@
           <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
         </div>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-containers-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-containers-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
     </section>
     <section class="nes-container code" id="code-containers">
@@ -119,7 +119,7 @@
           <span>No</span>
         </label>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-radios-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-radios-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
     </section>
     <section class="nes-container code" id="code-radios">
@@ -148,7 +148,7 @@
           <span>Dark</span>
         </label>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-checkboxes-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-checkboxes-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
     </section>
     <section class="nes-container code" id="code-checkboxes">
@@ -177,7 +177,7 @@
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
         <img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-avatars-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-avatars-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
     </section>
     <section class="nes-container code" id="code-avatars">
@@ -251,7 +251,7 @@
           </div>
         </div>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-form-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-form-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
     </section>
     <section class="nes-container code" id="code-form">
@@ -326,7 +326,7 @@
           <i class="nes-bcrikko"></i>
         </div>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-balloons-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-balloons-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-balloons">
@@ -368,7 +368,7 @@
           </ul>
         </div>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-lists-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-lists-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
     </section>
     <section class="nes-container code" id="code-lists">
@@ -448,7 +448,7 @@
           </tbody>
         </table>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-table-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-table-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
     </section>
     <section class="nes-container code" id="code-table">
@@ -518,7 +518,7 @@
         <progress class="nes-progress is-error" value="10" max="100"></progress>
         <progress class="nes-progress is-pattern" value="50" max="100"></progress>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-progress-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-progress-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
     </section>
     <section class="nes-container code" id="code-progress">
@@ -570,7 +570,7 @@
             <span class="is-warning">Text</span>
         </a>
       </div>
-      <button type="button" class="nes-btn is-error show-code" id="show-badges-code"><></button>
+      <button type="button" class="nes-btn is-error show-code" id="show-badges-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
     </section>
     <section class="nes-container code" id="code-badges">
@@ -646,7 +646,7 @@
           <i class="nes-icon like is-large"></i>
           <i class="nes-icon like is-empty"></i>
         </div>
-        <button type="button" class="nes-btn is-error show-code" id="show-reaction-code"><></button>
+        <button type="button" class="nes-btn is-error show-code" id="show-reaction-code">&lt;&gt;</button>
         <span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
       </section>
       <section class="nes-container code" id="code-reaction">
@@ -741,7 +741,7 @@
           <i class="nes-icon linkedin is-medium"></i>
           <i class="nes-icon linkedin is-large"></i>
         </div>
-        <button type="button" class="nes-btn is-error show-code" id="show-sns-code"><></button>
+        <button type="button" class="nes-btn is-error show-code" id="show-sns-code">&lt;&gt;</button>
         <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
       </section>
       <section class="nes-container code" id="code-sns">
@@ -831,7 +831,7 @@
           <i class="nes-phone"></i>
           <i class="nes-kirby"></i>
         </div>
-        <button type="button" class="nes-btn is-error show-code" id="show-others-code"><></button>
+        <button type="button" class="nes-btn is-error show-code" id="show-others-code">&lt;&gt;</button>
         <span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
       </section>
       <section class="nes-container code" id="code-others">
@@ -871,7 +871,7 @@
           <i class="snes-logo"></i>
           <i class="snes-jp-logo"></i>
         </div>
-        <button type="button" class="nes-btn is-error show-code" id="show-controllers-code"><></button>
+        <button type="button" class="nes-btn is-error show-code" id="show-controllers-code">&lt;&gt;</button>
         <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
       </section>
       <section class="nes-container code" id="code-controllers">

From 6447372c56267cc9c54e493f5c5bf9a78f4c1557 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Thu, 7 Feb 2019 18:48:23 -0200
Subject: [PATCH 09/14] feat(index.html): changed " to &quot;.

---
 index.html | 376 ++++++++++++++++++++++++++---------------------------
 1 file changed, 188 insertions(+), 188 deletions(-)

diff --git a/index.html b/index.html
index 04a18d4..de991c2 100644
--- a/index.html
+++ b/index.html
@@ -57,12 +57,12 @@
     </section>
     <section class="nes-container code" id="code-buttons">
       <code>
-        <p>&lt;button type="button" class="nes-btn"&gt;Normal&lt;/button&gt;</p>
-        <p>&lt;button type="button" class="nes-btn is-primary"&gt;Primary&lt;/button&gt;</p>
-        <p>&lt;button type="button" class="nes-btn is-success"&gt;Success&lt;/button&gt;</p>
-        <p>&lt;button type="button" class="nes-btn is-warning"&gt;Warning&lt;/button&gt;</p>
-        <p>&lt;button type="button" class="nes-btn is-error"&gt;Error&lt;/button&gt;</p>
-        <p>&lt;button type="button" class="nes-btn is-disabled"&gt;Disabled&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn&quot;&gt;Normal&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot;&gt;Primary&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-warning&quot;&gt;Warning&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;</p>
+        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
       </code>
     </section>
@@ -90,18 +90,18 @@
     </section>
     <section class="nes-container code" id="code-containers">
       <code>
-        <p>&lt;div class="nes-container with-title is-centered"&gt;
-          &lt;p class="title"&gt;Container.is-centered&lt;/p&gt;
+        <p>&lt;div class=&quot;nes-container with-title is-centered&quot;&gt;
+          &lt;p class=&quot;title&quot;&gt;Container.is-centered&lt;/p&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="nes-container is-dark with-title"&gt;
-          &lt;p class="title"&gt;Container.is-dark&lt;/p&gt;
+        <p>&lt;div class=&quot;nes-container is-dark with-title&quot;&gt;
+          &lt;p class=&quot;title&quot;&gt;Container.is-dark&lt;/p&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="nes-container is-rounded"&gt;
+        <p>&lt;div class=&quot;nes-container is-rounded&quot;&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;
-        <p>&lt;div class="nes-container is-rounded is-dark"&gt;
+        <p>&lt;div class=&quot;nes-container is-rounded is-dark&quot;&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
@@ -125,11 +125,11 @@
     <section class="nes-container code" id="code-radios">
       <code>
         <p>&lt;label&gt;
-          &lt;input type="radio" class="nes-radio" name="answer" checked /&gt;
+          &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; checked /&gt;
           &lt;span&gt;Yes&lt;/span&gt;
         &lt;/label&gt;</p>
         <p>&lt;label&gt;
-          &lt;input type="radio" class="nes-radio" name="answer" /&gt;
+          &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; /&gt;
           &lt;span&gt;No&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
@@ -154,11 +154,11 @@
     <section class="nes-container code" id="code-checkboxes">
       <code>
         <p>&lt;label&gt;
-          &lt;input type="checkbox" class="nes-checkbox" checked /&gt;
+          &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox&quot; checked /&gt;
           &lt;span>Enable&lt;/span&gt;
         &lt;/label&gt;</p>
         <p>&lt;label&gt;
-          &lt;input type="checkbox" class="nes-checkbox is-dark" checked /&gt;
+          &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox is-dark&quot; checked /&gt;
           &lt;span&gt;Dark&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
@@ -182,14 +182,14 @@
     </section>
     <section class="nes-container code" id="code-avatars">
       <code>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-small"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-large"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded"&gt;</p>
-        <p>&lt;img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded"&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-rounded&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small is-rounded&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;</p>
+        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
       </code>
     </section>
@@ -256,54 +256,54 @@
     </section>
     <section class="nes-container code" id="code-form">
       <code>
-        <p>&lt;div class="nes-field"&gt;
-          &lt;label for="name_field"&gt;Your name&lt;/label&gt;
-          &lt;input type="text" id="name_field" class="nes-input"&gt;
+        <p>&lt;div class=&quot;nes-field&quot;&gt;
+          &lt;label for=&quot;name_field&quot;&gt;Your name&lt;/label&gt;
+          &lt;input type=&quot;text&quot; id=&quot;name_field&quot; class=&quot;nes-input&quot;&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="nes-field is-inline"&gt;
-          &lt;label for="inline_field"&gt;.input.is-success&lt;/label&gt;
-          &lt;input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css"&gt;
+        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
+          &lt;label for=&quot;inline_field&quot;&gt;.input.is-success&lt;/label&gt;
+          &lt;input type=&quot;text&quot; id=&quot;inline_field&quot; class=&quot;nes-input is-success&quot; placeholder=&quot;NES.css&quot;&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="nes-field is-inline"&gt;
-          &lt;label for="warning_field"&gt;.input.is-warning&lt;/label&gt;
-          &lt;input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css"&gt;
+        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
+          &lt;label for=&quot;warning_field&quot;&gt;.input.is-warning&lt;/label&gt;
+          &lt;input type=&quot;text&quot; id=&quot;warning_field&quot; class=&quot;nes-input is-warning&quot; placeholder=&quot;8bit.css&quot;&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="nes-field is-inline"&gt;
-          &lt;label for="error_field"&gt;.input.is-error&lt;/label&gt;
-          &lt;input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css"&gt;
+        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
+          &lt;label for=&quot;error_field&quot;&gt;.input.is-error&lt;/label&gt;
+          &lt;input type=&quot;text&quot; id=&quot;error_field&quot; class=&quot;nes-input is-error&quot; placeholder=&quot;awesome.css&quot;&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="field"&gt;
-          &lt;label for="textarea_field"&gt;Textarea&lt;/label&gt;
-          &lt;textarea id="textarea_field" class="nes-textarea"&gt;&lt;/textarea&gt;
+        <p>&lt;div class=&quot;field&quot;&gt;
+          &lt;label for=&quot;textarea_field&quot;&gt;Textarea&lt;/label&gt;
+          &lt;textarea id=&quot;textarea_field&quot; class=&quot;nes-textarea&quot;&gt;&lt;/textarea&gt;
         &lt;/div&gt;</p>
 
-        <p>&lt;div id="selects" class="selects"&gt;
-          &lt;div class="nes-select"&gt;
+        <p>&lt;div id=&quot;selects&quot; class=&quot;selects&quot;&gt;
+          &lt;div class=&quot;nes-select&quot;&gt;
             &lt;select required&gt;
-              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value="0"&gt;To be&lt;/option&gt;
-              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
             &lt;/select&gt;
           &lt;/div&gt;</p>
-        <p>&lt;div class="nes-select is-success"&gt;
+        <p>&lt;div class=&quot;nes-select is-success&quot;&gt;
             &lt;select required&gt;
-              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value="0"&gt;To be&lt;/option&gt;
-              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
             &lt;/select&gt;
           &lt;/div&gt;</p>
-        <p>&lt;div class="nes-select is-warning"&gt;
+        <p>&lt;div class=&quot;nes-select is-warning&quot;&gt;
             &lt;select required&gt;
-              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value="0"&gt;To be&lt;/option&gt;
-              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
             &lt;/select&gt;
           &lt;/div&gt;</p>
-        <p>&lt;div class="nes-select is-error"&gt;
+        <p>&lt;div class=&quot;nes-select is-error&quot;&gt;
             &lt;select required&gt;
-              &lt;option value="" disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value="0"&gt;To be&lt;/option&gt;
-              &lt;option value="1"&gt;Not to be&lt;/option&gt;
+              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
             &lt;/select&gt;
           &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
@@ -331,17 +331,17 @@
     </section>
     <section class="nes-container code" id="code-balloons">
       <code>
-        <p>&lt;div class="message -left"&gt;
-          &lt;i class="nes-bcrikko"&gt;&lt;/i&gt;
-          &lt;div class="nes-balloon from-left"&gt;
+        <p>&lt;div class=&quot;message -left&quot;&gt;
+          &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
+          &lt;div class=&quot;nes-balloon from-left&quot;&gt;
             &lt;p&gt;Hello NES.css&lt;/p&gt;
           &lt;/div&gt;
         &lt;/div&gt;</p>
-        <p>&lt;div class="message -right"&gt;
-          &lt;div class="nes-balloon from-right"&gt;
+        <p>&lt;div class=&quot;message -right&quot;&gt;
+          &lt;div class=&quot;nes-balloon from-right&quot;&gt;
             &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
           &lt;/div&gt;
-          &lt;i class="nes-bcrikko"&gt;&lt;/i&gt;
+          &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
       </code>
@@ -373,8 +373,8 @@
     </section>
     <section class="nes-container code" id="code-lists">
       <code>
-        <p>&lt;div class="lists"&gt;
-          &lt;ul class="nes-list is-disc"&gt;
+        <p>&lt;div class=&quot;lists&quot;&gt;
+          &lt;ul class=&quot;nes-list is-disc&quot;&gt;
             &lt;li&gt;Good morning.&lt;/li&gt;
             &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
             &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
@@ -382,8 +382,8 @@
           &lt;/ul&gt;
         &lt;/div&gt;</p>
 
-        <p>&lt;div class="lists"&gt;
-          &lt;ul class="nes-list is-circle"&gt;
+        <p>&lt;div class=&quot;lists&quot;&gt;
+          &lt;ul class=&quot;nes-list is-circle&quot;&gt;
             &lt;li&gt;Good morning.&lt;/li&gt;
             &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
             &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
@@ -453,8 +453,8 @@
     </section>
     <section class="nes-container code" id="code-table">
       <code>
-        <p>&lt;div class="nes-table-responsive"&gt;
-        &lt;table class="nes-table is-bordered is-centered"&gt;
+        <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
+        &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;th&gt;Table.is-bordered&lt;/th&gt;
@@ -479,8 +479,8 @@
           &lt;/tbody&gt;
         &lt;/table&gt;
       &lt;/div&gt;</p>
-      <p>&lt;div class="nes-table-responsive"&gt;
-        &lt;table class="nes-table is-bordered is-dark"&gt;
+      <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
+        &lt;table class=&quot;nes-table is-bordered is-dark&quot;&gt;
           &lt;thead&gt;
             &lt;tr&gt;
               &lt;th&gt;Table.is-dark&lt;/th&gt;
@@ -523,12 +523,12 @@
     </section>
     <section class="nes-container code" id="code-progress">
       <code>
-        <p>&lt;progress class="nes-progress" value="90" max="100"&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class="nes-progress is-primary" value="80" max="100"&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class="nes-progress is-success" value="50" max="100"&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class="nes-progress is-warning" value="30" max="100"&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class="nes-progress is-error" value="10" max="100"&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class="nes-progress is-pattern" value="50" max="100"&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress&quot; value=&quot;90&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress is-primary&quot; value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress is-success&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress is-warning&quot; value=&quot;30&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress is-error&quot; value=&quot;10&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
+        <p>&lt;progress class=&quot;nes-progress is-pattern&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
       </code>
     </section>
@@ -575,38 +575,38 @@
     </section>
     <section class="nes-container code" id="code-badges">
       <code>
-        <p>&lt;a href="#" class="nes-badge"&gt;
-            &lt;span class="is-dark"&gt;NES.css&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+            &lt;span class=&quot;is-dark&quot;&gt;NES.css&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge"&gt;
-            &lt;span class="is-primary"&gt;is&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+            &lt;span class=&quot;is-primary&quot;&gt;is&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge"&gt;
-            &lt;span class="is-success"&gt;a&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+            &lt;span class=&quot;is-success&quot;&gt;a&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge"&gt;
-            &lt;span class="is-warning"&gt;great&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+            &lt;span class=&quot;is-warning&quot;&gt;great&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge"&gt;
-            &lt;span class="is-error"&gt;framework!&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+            &lt;span class=&quot;is-error&quot;&gt;framework!&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge is-splited"&gt;
-            &lt;span class="is-dark"&gt;npm&lt;/span&gt;
-            &lt;span class="is-primary"&gt;1.1.0&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
+            &lt;span class=&quot;is-dark&quot;&gt;npm&lt;/span&gt;
+            &lt;span class=&quot;is-primary&quot;&gt;1.1.0&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge is-splited"&gt;
-            &lt;span class="is-dark"&gt;test&lt;/span&gt;
-            &lt;span class="is-success"&gt;100%&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
+            &lt;span class=&quot;is-dark&quot;&gt;test&lt;/span&gt;
+            &lt;span class=&quot;is-success&quot;&gt;100%&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge is-icon"&gt;
-            &lt;span class="is-warning"&gt;
-                &lt;i class="nes-icon star is-small"&gt;&lt;/i&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
+            &lt;span class=&quot;is-warning&quot;&gt;
+                &lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;
             &lt;/span&gt;
-            &lt;span class="is-primary"&gt;Icons&lt;/span&gt;
+            &lt;span class=&quot;is-primary&quot;&gt;Icons&lt;/span&gt;
         &lt;/a&gt;</p>
-        <p>&lt;a href="#" class="nes-badge is-icon"&gt;
-            &lt;span class="is-dark"&gt;hi&lt;/span&gt;
-            &lt;span class="is-warning"&gt;Text&lt;/span&gt;
+        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
+            &lt;span class=&quot;is-dark&quot;&gt;hi&lt;/span&gt;
+            &lt;span class=&quot;is-warning&quot;&gt;Text&lt;/span&gt;
         &lt;/a&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
       </code>
@@ -651,34 +651,34 @@
       </section>
       <section class="nes-container code" id="code-reaction">
         <code>
-          <p>&lt;i class="nes-icon heart is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon heart"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon heart is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon heart is-large"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon heart is-empty"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon heart is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon heart&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon heart is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon heart is-large&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon heart is-empty&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon star is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon star is-half is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-half"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-half is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-half is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-half is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-half&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-half is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-half is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon star is-transparent is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-transparent"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-transparent is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon star is-transparent is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-transparent is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-transparent&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-transparent is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-transparent is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon star is-empty"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon star is-empty&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon like is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon like"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon like is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon like is-large"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon like is-empty"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon like is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon like&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon like is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon like is-large&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon like is-empty&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
         </code>
       </section>
@@ -746,60 +746,60 @@
       </section>
       <section class="nes-container code" id="code-sns">
         <code>
-          <p>&lt;i class="nes-icon twitter is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitter"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitter is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitter is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitter is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitter&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitter is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitter is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon facebook is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon facebook"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon facebook is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon facebook is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon facebook is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon facebook&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon facebook is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon facebook is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon github is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon github"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon github is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon github is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon github is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon github&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon github is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon github is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon youtube is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon youtube"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon youtube is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon youtube is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon youtube is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon youtube&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon youtube is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon youtube is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon google is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon google"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon google is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon google is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon google is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon google&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon google is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon google is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon medium is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon medium is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon medium is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon medium is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon medium is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon medium is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon twitch is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitch"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitch is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon twitch is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitch is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitch&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitch is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon twitch is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon reddit is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon reddit"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon reddit is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon reddit is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon reddit is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon reddit&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon reddit is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon reddit is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon whatsapp is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon whatsapp"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon whatsapp is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon whatsapp is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon whatsapp is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon whatsapp&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon whatsapp is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon whatsapp is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon gmail is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon gmail"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon gmail is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon gmail is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon gmail is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon gmail&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon gmail is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon gmail is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon linkedin is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon linkedin"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon linkedin is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon linkedin is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon linkedin is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon linkedin&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
         </code>
       </section>
@@ -836,29 +836,29 @@
       </section>
       <section class="nes-container code" id="code-others">
         <code>
-          <p>&lt;i class="nes-icon close is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon close"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon close is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon close is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon close is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon close&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon close is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon close is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-octocat animate"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-octocat animate&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-icon trophy is-small"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon trophy"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon trophy is-medium"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-icon trophy is-large"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon trophy is-small&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon trophy&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon trophy is-medium&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-icon trophy is-large&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-mario"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-ash"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-pokeball"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-mario&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-ash&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-pokeball&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-bulbasaur"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-charmander"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-squirtle"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-bulbasaur&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-charmander&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-squirtle&quot;&gt;&lt;/i&gt;</p>
 
-          <p>&lt;i class="nes-smartphone"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-phone"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-kirby"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-smartphone&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-phone&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-kirby&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
         </code>
       </section>
@@ -876,10 +876,10 @@
       </section>
       <section class="nes-container code" id="code-controllers">
         <code>
-          <p>&lt;i class="nes-logo"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="nes-jp-logo"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="snes-logo"&gt;&lt;/i&gt;</p>
-          <p>&lt;i class="snes-jp-logo"&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;</p>
+          <p>&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
         </code>
       </section>

From 12116af2df47555c7f23dd54db13fb9bb6c7861e Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Thu, 7 Feb 2019 18:55:09 -0200
Subject: [PATCH 10/14] feat(index.html): add <pre> tag.

---
 index.html | 60 +++++++++++++++++++++++++++---------------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index de991c2..5c8853f 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
       <span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-buttons">
-      <code>
+      <pre><code>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn&quot;&gt;Normal&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot;&gt;Primary&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;</p>
@@ -64,7 +64,7 @@
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -89,7 +89,7 @@
       <span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
     </section>
     <section class="nes-container code" id="code-containers">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-container with-title is-centered&quot;&gt;
           &lt;p class=&quot;title&quot;&gt;Container.is-centered&lt;/p&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
@@ -105,7 +105,7 @@
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
-      </code>
+      </code></pre>
     </section>
     <section class="nes-container with-title">
       <h2 class="title">Radios</h2>
@@ -123,7 +123,7 @@
       <span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
     </section>
     <section class="nes-container code" id="code-radios">
-      <code>
+      <pre><code>
         <p>&lt;label&gt;
           &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; checked /&gt;
           &lt;span&gt;Yes&lt;/span&gt;
@@ -133,7 +133,7 @@
           &lt;span&gt;No&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -152,7 +152,7 @@
       <span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
     </section>
     <section class="nes-container code" id="code-checkboxes">
-      <code>
+      <pre><code>
         <p>&lt;label&gt;
           &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox&quot; checked /&gt;
           &lt;span>Enable&lt;/span&gt;
@@ -162,7 +162,7 @@
           &lt;span&gt;Dark&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -181,7 +181,7 @@
       <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
     </section>
     <section class="nes-container code" id="code-avatars">
-      <code>
+      <pre><code>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;</p>
@@ -191,7 +191,7 @@
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="form nes-container with-title">
@@ -255,7 +255,7 @@
       <span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
     </section>
     <section class="nes-container code" id="code-form">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-field&quot;&gt;
           &lt;label for=&quot;name_field&quot;&gt;Your name&lt;/label&gt;
           &lt;input type=&quot;text&quot; id=&quot;name_field&quot; class=&quot;nes-input&quot;&gt;
@@ -307,7 +307,7 @@
             &lt;/select&gt;
           &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="balloon nes-container with-title">
@@ -330,7 +330,7 @@
       <span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-balloons">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;message -left&quot;&gt;
           &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
           &lt;div class=&quot;nes-balloon from-left&quot;&gt;
@@ -344,7 +344,7 @@
           &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -372,7 +372,7 @@
       <span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
     </section>
     <section class="nes-container code" id="code-lists">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;lists&quot;&gt;
           &lt;ul class=&quot;nes-list is-disc&quot;&gt;
             &lt;li&gt;Good morning.&lt;/li&gt;
@@ -391,7 +391,7 @@
           &lt;/ul&gt;
         &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -452,7 +452,7 @@
       <span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
     </section>
     <section class="nes-container code" id="code-table">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
         &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
           &lt;thead&gt;
@@ -505,7 +505,7 @@
           &lt;/tbody&gt;
         &lt;/table&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -522,7 +522,7 @@
       <span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
     </section>
     <section class="nes-container code" id="code-progress">
-      <code>
+      <pre><code>
         <p>&lt;progress class=&quot;nes-progress&quot; value=&quot;90&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-primary&quot; value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-success&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
@@ -530,7 +530,7 @@
         <p>&lt;progress class=&quot;nes-progress is-error&quot; value=&quot;10&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-pattern&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title" class="badges">
@@ -574,7 +574,7 @@
       <span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
     </section>
     <section class="nes-container code" id="code-badges">
-      <code>
+      <pre><code>
         <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
             &lt;span class=&quot;is-dark&quot;&gt;NES.css&lt;/span&gt;
         &lt;/a&gt;</p>
@@ -609,7 +609,7 @@
             &lt;span class=&quot;is-warning&quot;&gt;Text&lt;/span&gt;
         &lt;/a&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -650,7 +650,7 @@
         <span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
       </section>
       <section class="nes-container code" id="code-reaction">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon heart is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon heart&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon heart is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -680,7 +680,7 @@
           <p>&lt;i class=&quot;nes-icon like is-large&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon like is-empty&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -745,7 +745,7 @@
         <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
       </section>
       <section class="nes-container code" id="code-sns">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon twitter is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon twitter&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon twitter is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -801,7 +801,7 @@
           <p>&lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -835,7 +835,7 @@
         <span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
       </section>
       <section class="nes-container code" id="code-others">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon close is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon close&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon close is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -860,7 +860,7 @@
           <p>&lt;i class=&quot;nes-phone&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-kirby&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -875,13 +875,13 @@
         <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
       </section>
       <section class="nes-container code" id="code-controllers">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
-        </code>
+        </code></pre>
       </section>
     </section>
 

From 53dfbb2a58c2163797e11175e4af27d5be08207a Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Thu, 7 Feb 2019 18:55:57 -0200
Subject: [PATCH 11/14] feat(index.html): add pre whitespace normal.

---
 style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style.css b/style.css
index 17ca9c3..ce47018 100644
--- a/style.css
+++ b/style.css
@@ -106,6 +106,10 @@ div.containers > .nes-container {
   top: -4px;
 }
 
+pre {
+  white-space: normal;
+}
+
 .code {
   display: none;
   font-size: .85em;

From d9681f1388e4f96f682ddfb555f3f425da6493c4 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Fri, 8 Feb 2019 21:42:27 +0900
Subject: [PATCH 12/14] feat: fix index.html

remove p element from code and add highlight.js
---
 .prettierignore              |   1 +
 demo/lib/highlight-theme.css | 115 ++++++
 demo/lib/highlight.js        |   2 +
 style.css => demo/style.css  |  55 +--
 index.html                   | 668 +++++++++++++++++------------------
 package.json                 |   8 +-
 6 files changed, 475 insertions(+), 374 deletions(-)
 create mode 100644 demo/lib/highlight-theme.css
 create mode 100644 demo/lib/highlight.js
 rename style.css => demo/style.css (89%)

diff --git a/.prettierignore b/.prettierignore
index 5098fa1..10cc54b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,3 @@
 **/*.html
 **/*.md
+demo/lib/*
diff --git a/demo/lib/highlight-theme.css b/demo/lib/highlight-theme.css
new file mode 100644
index 0000000..d1d9be3
--- /dev/null
+++ b/demo/lib/highlight-theme.css
@@ -0,0 +1,115 @@
+/*
+ * Visual Studio 2015 dark style
+ * Author: Nicolas LLOBERA <nllobera@gmail.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1E1E1E;
+  color: #DCDCDC;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name {
+  color: #569CD6;
+}
+.hljs-link {
+  color: #569CD6;
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #4EC9B0;
+}
+
+.hljs-number,
+.hljs-class {
+  color: #B8D7A3;
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: #D69D85;
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: #9A5334;
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: #DCDCDC;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #57A64A;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  color: #608B4E;
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: #9B9B9B;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #BD63C5;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: #9CDCFE;
+}
+
+.hljs-section {
+  color: gold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/*.hljs-code {
+  font-family:'Monospace';
+}*/
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #D7BA7D;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  display: inline-block;
+  width: 100%;
+}
diff --git a/demo/lib/highlight.js b/demo/lib/highlight.js
new file mode 100644
index 0000000..dd62ef0
--- /dev/null
+++ b/demo/lib/highlight.js
@@ -0,0 +1,2 @@
+/*! highlight.js v9.14.2 | BSD3 License | git.io/hljslicense */
+!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=M.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function c(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function u(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value).replace('"',"&quot;")+'"'}l+="<"+t(e)+E.map.call(e.attributes,r).join("")+">"}function c(e){l+="</"+t(e)+">"}function u(e){("start"===e.event?o:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substring(s,g[0].offset)),s=g[0].offset,g===e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function l(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):B(a.k).forEach(function(e){c(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.endSameAsBegin&&(a.e=a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return s("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var u=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=u.length?t(u.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e){return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")}function c(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t].endSameAsBegin&&(n.c[t].eR=o(n.c[t].bR.exec(e)[0])),n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function s(e,n){return!a&&r(n.iR,e)}function p(e,n){var t=R.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function d(e,n,t,r){var a=r?"":j.classPrefix,i='<span class="'+a,o=t?"":I;return i+=e+'">',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=p(E,r),e?(M+=e[1],a+=d(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function b(){var e="string"==typeof E.sL;if(e&&!L[E.sL])return n(k);var t=e?f(E.sL,k,!0,B[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(B[E.sL]=t.top),d(t.language,t.value,!1,!0)}function v(){y+=null!=E.sL?b():h(),k=""}function m(e){y+=e.cN?d(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function N(e,n){if(k+=e,null==n)return v(),0;var t=c(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),v(),t.rB||t.eB||(k=n)),m(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),v(),a.eE&&(k=n));do E.cN&&(y+=I),E.skip||E.sL||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.eR=r.eR),m(r.starts,"")),a.rE?0:n.length}if(s(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return k+=n,n.length||1}var R=w(e);if(!R)throw new Error('Unknown language: "'+e+'"');l(R);var x,E=i||R,B={},y="";for(x=E;x!==R;x=x.parent)x.cN&&(y=d(x.cN,"",!0)+y);var k="",M=0;try{for(var C,A,S=0;;){if(E.t.lastIndex=S,C=E.t.exec(t),!C)break;A=N(t.substring(S,C.index),C[0]),S=C.index+A}for(N(t.substr(S)),x=E;x.parent;x=x.parent)x.cN&&(y+=I);return{r:M,value:y,language:e,top:E}}catch(O){if(O.message&&-1!==O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function g(e,t){t=t||j.languages||B(L);var r={r:0,value:n(e)},a=r;return t.filter(w).filter(x).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return j.tabReplace||j.useBR?e.replace(C,function(e,n){return j.useBR&&"\n"===e?"<br>":j.tabReplace?n.replace(/\t/g,j.tabReplace):""}):e}function d(e,n,t){var r=n?y[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function h(e){var n,t,r,o,s,l=i(e);a(l)||(j.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,s=n.textContent,r=l?f(l,s,!0):g(s),t=c(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=u(t,c(o),s)),r.value=p(r.value),e.innerHTML=r.value,e.className=d(e.className,l,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){j=o(j,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,h)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=L[n]=t(e);r.aliases&&r.aliases.forEach(function(e){y[e]=n})}function R(){return B(L)}function w(e){return e=(e||"").toLowerCase(),L[e]||L[y[e]]}function x(e){var n=w(e);return n&&!n.disableAutodetect}var E=[],B=Object.keys,L={},y={},k=/^(no-?highlight|plain|text)$/i,M=/\blang(?:uage)?-([\w-]+)\b/i,C=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,I="</span>",j={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=h,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.autoDetection=x,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"meta",b:/<\?xml/,e:/\?>/,r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0},{b:'b"',e:'"',skip:!0},{b:"b'",e:"'",skip:!0},s.inherit(s.ASM,{i:null,cN:null,c:null,skip:!0}),s.inherit(s.QSM,{i:null,cN:null,c:null,skip:!0})]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});
\ No newline at end of file
diff --git a/style.css b/demo/style.css
similarity index 89%
rename from style.css
rename to demo/style.css
index ce47018..50c5f6f 100644
--- a/style.css
+++ b/demo/style.css
@@ -96,64 +96,65 @@ div.containers > .nes-container {
 }
 
 .show-code {
-  font-size: .7em;
-  height: 34px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
   display: flex;
   justify-content: center;
   width: 40px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
+  height: 34px;
+  font-size: 0.7em;
 }
 
-pre {
-  white-space: normal;
+.sample-code {
+  margin: 0;
+}
+.sample-code > code {
+  padding: 1em 2em;
+  line-height: 2em;
 }
 
 .code {
-  display: none;
-  font-size: .85em;
-  color: #e76e55;
-  background-color: rgba(45, 45, 45, .9);
-  padding: 15px 0px 0px 15px;
-  margin-top: -20px;
   box-sizing: border-box;
+  display: none;
+  padding: 15px 0 0 15px;
+  margin-top: -20px;
   overflow: auto;
+  font-size: 0.85em;
+  color: #e76e55;
+  background-color: rgba(45, 45, 45, 0.9);
 }
 
 .copy {
-  height: 34px;
   width: 58px;
+  height: 34px;
 }
 
-#form .nes-field, #form .field {
+#form .nes-field,
+#form .field {
   margin-top: 20px;
 }
 
 .copied {
   position: absolute;
-  bottom: 25px;
-  padding: 10px;
-  font-size: .7em;
-  z-index: 2;
   right: 35px;
-  color: #000;
+  bottom: 25px;
+  z-index: 2;
   display: none;
+  padding: 10px;
+  font-size: 0.7em;
+  color: #000;
 }
 
 .balloon .copied {
-  bottom: -4px;
   right: 10px;
-}
-
-.code p {
-  width: 96%;
+  bottom: -4px;
 }
 
 @media screen and (max-width: 1280px) {
   .code p:first-child {
-    padding-top: 2.7em;
     width: 99%;
+    padding-top: 2.7em;
   }
 }
 
@@ -171,8 +172,8 @@ pre {
   }
 
   .code p {
-    font-size: .8em;
     width: 100%;
+    font-size: 0.8em;
   }
 
   #code-avatars p {
diff --git a/index.html b/index.html
index 5c8853f..4fe9802 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,10 @@
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
     <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
-    <link href="./style.css" rel="stylesheet" />
+    <link href="./demo/style.css" rel="stylesheet" />
+    <script async src="./demo/lib/highlight.js"></script>
+    <link async href="./demo/lib/highlight-theme.css" rel="stylesheet" />
+    <script>hljs.initHighlightingOnLoad();</script>
 
     <meta property="og:type" content="website" />
     <meta property="og:title" content="NES.css" />
@@ -56,15 +59,14 @@
       <span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-buttons">
-      <pre><code>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn&quot;&gt;Normal&lt;/button&gt;</p>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot;&gt;Primary&lt;/button&gt;</p>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;</p>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-warning&quot;&gt;Warning&lt;/button&gt;</p>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;</p>
-        <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;button type=&quot;button&quot; class=&quot;nes-btn&quot;&gt;Normal&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot;&gt;Primary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;
+<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
+</code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -89,23 +91,21 @@
       <span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
     </section>
     <section class="nes-container code" id="code-containers">
-      <pre><code>
-        <p>&lt;div class=&quot;nes-container with-title is-centered&quot;&gt;
-          &lt;p class=&quot;title&quot;&gt;Container.is-centered&lt;/p&gt;
-          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-container is-dark with-title&quot;&gt;
-          &lt;p class=&quot;title&quot;&gt;Container.is-dark&lt;/p&gt;
-          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-container is-rounded&quot;&gt;
-          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
-        &lt;/div&gt;
-        <p>&lt;div class=&quot;nes-container is-rounded is-dark&quot;&gt;
-          &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
-        &lt;/div&gt;
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;div class=&quot;nes-container with-title is-centered&quot;&gt;
+  &lt;p class=&quot;title&quot;&gt;Container.is-centered&lt;/p&gt;
+  &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-container is-dark with-title&quot;&gt;
+  &lt;p class=&quot;title&quot;&gt;Container.is-dark&lt;/p&gt;
+  &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-container is-rounded&quot;&gt;
+  &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-container is-rounded is-dark&quot;&gt;
+  &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
     </section>
     <section class="nes-container with-title">
       <h2 class="title">Radios</h2>
@@ -123,17 +123,15 @@
       <span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
     </section>
     <section class="nes-container code" id="code-radios">
-      <pre><code>
-        <p>&lt;label&gt;
-          &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; checked /&gt;
-          &lt;span&gt;Yes&lt;/span&gt;
-        &lt;/label&gt;</p>
-        <p>&lt;label&gt;
-          &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; /&gt;
-          &lt;span&gt;No&lt;/span&gt;
-        &lt;/label&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;label&gt;
+  &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; checked /&gt;
+  &lt;span&gt;Yes&lt;/span&gt;
+&lt;/label&gt;
+&lt;label&gt;
+  &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; /&gt;
+  &lt;span&gt;No&lt;/span&gt;
+&lt;/label&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -152,17 +150,15 @@
       <span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
     </section>
     <section class="nes-container code" id="code-checkboxes">
-      <pre><code>
-        <p>&lt;label&gt;
-          &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox&quot; checked /&gt;
-          &lt;span>Enable&lt;/span&gt;
-        &lt;/label&gt;</p>
-        <p>&lt;label&gt;
-          &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox is-dark&quot; checked /&gt;
-          &lt;span&gt;Dark&lt;/span&gt;
-        &lt;/label&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;label&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox&quot; checked /&gt;
+  &lt;span>Enable&lt;/span&gt;
+&lt;/label&gt;
+&lt;label&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox is-dark&quot; checked /&gt;
+  &lt;span&gt;Dark&lt;/span&gt;
+&lt;/label&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -181,17 +177,15 @@
       <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
     </section>
     <section class="nes-container code" id="code-avatars">
-      <pre><code>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-rounded&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small is-rounded&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;</p>
-        <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-rounded&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small is-rounded&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
     </section>
 
     <section class="form nes-container with-title">
@@ -255,59 +249,58 @@
       <span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
     </section>
     <section class="nes-container code" id="code-form">
-      <pre><code>
-        <p>&lt;div class=&quot;nes-field&quot;&gt;
-          &lt;label for=&quot;name_field&quot;&gt;Your name&lt;/label&gt;
-          &lt;input type=&quot;text&quot; id=&quot;name_field&quot; class=&quot;nes-input&quot;&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
-          &lt;label for=&quot;inline_field&quot;&gt;.input.is-success&lt;/label&gt;
-          &lt;input type=&quot;text&quot; id=&quot;inline_field&quot; class=&quot;nes-input is-success&quot; placeholder=&quot;NES.css&quot;&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
-          &lt;label for=&quot;warning_field&quot;&gt;.input.is-warning&lt;/label&gt;
-          &lt;input type=&quot;text&quot; id=&quot;warning_field&quot; class=&quot;nes-input is-warning&quot; placeholder=&quot;8bit.css&quot;&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-field is-inline&quot;&gt;
-          &lt;label for=&quot;error_field&quot;&gt;.input.is-error&lt;/label&gt;
-          &lt;input type=&quot;text&quot; id=&quot;error_field&quot; class=&quot;nes-input is-error&quot; placeholder=&quot;awesome.css&quot;&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;field&quot;&gt;
-          &lt;label for=&quot;textarea_field&quot;&gt;Textarea&lt;/label&gt;
-          &lt;textarea id=&quot;textarea_field&quot; class=&quot;nes-textarea&quot;&gt;&lt;/textarea&gt;
-        &lt;/div&gt;</p>
+      <pre class="sample-code"><code class="html">&lt;div class=&quot;nes-field&quot;&gt;
+  &lt;label for=&quot;name_field&quot;&gt;Your name&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;name_field&quot; class=&quot;nes-input&quot;&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-field is-inline&quot;&gt;
+  &lt;label for=&quot;inline_field&quot;&gt;.input.is-success&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;inline_field&quot; class=&quot;nes-input is-success&quot; placeholder=&quot;NES.css&quot;&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-field is-inline&quot;&gt;
+  &lt;label for=&quot;warning_field&quot;&gt;.input.is-warning&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;warning_field&quot; class=&quot;nes-input is-warning&quot; placeholder=&quot;8bit.css&quot;&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-field is-inline&quot;&gt;
+  &lt;label for=&quot;error_field&quot;&gt;.input.is-error&lt;/label&gt;
+  &lt;input type=&quot;text&quot; id=&quot;error_field&quot; class=&quot;nes-input is-error&quot; placeholder=&quot;awesome.css&quot;&gt;
+&lt;/div&gt;
+&lt;div class=&quot;field&quot;&gt;
+  &lt;label for=&quot;textarea_field&quot;&gt;Textarea&lt;/label&gt;
+  &lt;textarea id=&quot;textarea_field&quot; class=&quot;nes-textarea&quot;&gt;&lt;/textarea&gt;
+&lt;/div&gt;
 
-        <p>&lt;div id=&quot;selects&quot; class=&quot;selects&quot;&gt;
-          &lt;div class=&quot;nes-select&quot;&gt;
-            &lt;select required&gt;
-              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
-              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
-            &lt;/select&gt;
-          &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-select is-success&quot;&gt;
-            &lt;select required&gt;
-              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
-              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
-            &lt;/select&gt;
-          &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-select is-warning&quot;&gt;
-            &lt;select required&gt;
-              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
-              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
-            &lt;/select&gt;
-          &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;nes-select is-error&quot;&gt;
-            &lt;select required&gt;
-              &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
-              &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
-              &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
-            &lt;/select&gt;
-          &lt;/div&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
-      </code></pre>
+&lt;div id=&quot;selects&quot; class=&quot;selects&quot;&gt;
+  &lt;div class=&quot;nes-select&quot;&gt;
+    &lt;select required&gt;
+      &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+      &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+      &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;nes-select is-success&quot;&gt;
+    &lt;select required&gt;
+      &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+      &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+      &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;nes-select is-warning&quot;&gt;
+    &lt;select required&gt;
+      &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+      &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+      &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;nes-select is-error&quot;&gt;
+    &lt;select required&gt;
+      &lt;option value=&quot;&quot; disabled selected hidden&gt;Select...&lt;/option&gt;
+      &lt;option value=&quot;0&quot;&gt;To be&lt;/option&gt;
+      &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;/div&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
     </section>
 
     <section class="balloon nes-container with-title">
@@ -330,21 +323,19 @@
       <span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-balloons">
-      <pre><code>
-        <p>&lt;div class=&quot;message -left&quot;&gt;
-          &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
-          &lt;div class=&quot;nes-balloon from-left&quot;&gt;
-            &lt;p&gt;Hello NES.css&lt;/p&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;</p>
-        <p>&lt;div class=&quot;message -right&quot;&gt;
-          &lt;div class=&quot;nes-balloon from-right&quot;&gt;
-            &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
-          &lt;/div&gt;
-          &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
-        &lt;/div&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;div class=&quot;message -left&quot;&gt;
+  &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
+  &lt;div class=&quot;nes-balloon from-left&quot;&gt;
+    &lt;p&gt;Hello NES.css&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;message -right&quot;&gt;
+  &lt;div class=&quot;nes-balloon from-right&quot;&gt;
+    &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -372,26 +363,24 @@
       <span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
     </section>
     <section class="nes-container code" id="code-lists">
-      <pre><code>
-        <p>&lt;div class=&quot;lists&quot;&gt;
-          &lt;ul class=&quot;nes-list is-disc&quot;&gt;
-            &lt;li&gt;Good morning.&lt;/li&gt;
-            &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
-            &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
-            &lt;li&gt;Good night.&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/div&gt;</p>
+      <pre class="sample-code"><code class="html">&lt;div class=&quot;lists&quot;&gt;
+  &lt;ul class=&quot;nes-list is-disc&quot;&gt;
+    &lt;li&gt;Good morning.&lt;/li&gt;
+    &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
+    &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
+    &lt;li&gt;Good night.&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
 
-        <p>&lt;div class=&quot;lists&quot;&gt;
-          &lt;ul class=&quot;nes-list is-circle&quot;&gt;
-            &lt;li&gt;Good morning.&lt;/li&gt;
-            &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
-            &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
-            &lt;li&gt;Good night.&lt;/li&gt;
-          &lt;/ul&gt;
-        &lt;/div&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
-      </code></pre>
+&lt;div class=&quot;lists&quot;&gt;
+  &lt;ul class=&quot;nes-list is-circle&quot;&gt;
+    &lt;li&gt;Good morning.&lt;/li&gt;
+    &lt;li&gt;Thou hast had a good night's sleep, I hope.&lt;/li&gt;
+    &lt;li&gt;Thou hast had a good afternoon&lt;/li&gt;
+    &lt;li&gt;Good night.&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -452,60 +441,59 @@
       <span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
     </section>
     <section class="nes-container code" id="code-table">
-      <pre><code>
-        <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
-        &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
-          &lt;thead&gt;
-            &lt;tr&gt;
-              &lt;th&gt;Table.is-bordered&lt;/th&gt;
-              &lt;th&gt;Table.is-centered&lt;/th&gt;
-              &lt;th&gt;Table.is-centered&lt;/th&gt;
-              &lt;th&gt;Table.is-centered&lt;/th&gt;
-            &lt;/tr&gt;
-          &lt;/thead&gt;
-          &lt;tbody&gt;
-            &lt;tr&gt;
-              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
-            &lt;/tr&gt;
-            &lt;tr&gt;
-              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
-            &lt;/tr&gt;
-          &lt;/tbody&gt;
-        &lt;/table&gt;
-      &lt;/div&gt;</p>
-      <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
-        &lt;table class=&quot;nes-table is-bordered is-dark&quot;&gt;
-          &lt;thead&gt;
-            &lt;tr&gt;
-              &lt;th&gt;Table.is-dark&lt;/th&gt;
-              &lt;th&gt;Table.is-bordered&lt;/th&gt;
-              &lt;th&gt;Table.is-bordered&lt;/th&gt;
-              &lt;th&gt;Table.is-bordered&lt;/th&gt;
-            &lt;/tr&gt;
-          &lt;/thead&gt;
-          &lt;tbody&gt;
-            &lt;tr&gt;
-              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternon&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good night&lt;/td&gt;
-            &lt;/tr&gt;
-            &lt;tr&gt;
-              &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-              &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-            &lt;/tr&gt;
-          &lt;/tbody&gt;
-        &lt;/table&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;div class=&quot;nes-table-responsive&quot;&gt;
+&lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Table.is-bordered&lt;/th&gt;
+      &lt;th&gt;Table.is-centered&lt;/th&gt;
+      &lt;th&gt;Table.is-centered&lt;/th&gt;
+      &lt;th&gt;Table.is-centered&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+      &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;/div&gt;
+&lt;div class=&quot;nes-table-responsive&quot;&gt;
+  &lt;table class=&quot;nes-table is-bordered is-dark&quot;&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;
+        &lt;th&gt;Table.is-dark&lt;/th&gt;
+        &lt;th&gt;Table.is-bordered&lt;/th&gt;
+        &lt;th&gt;Table.is-bordered&lt;/th&gt;
+        &lt;th&gt;Table.is-bordered&lt;/th&gt;
+      &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternon&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+&lt;/div&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -522,15 +510,13 @@
       <span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
     </section>
     <section class="nes-container code" id="code-progress">
-      <pre><code>
-        <p>&lt;progress class=&quot;nes-progress&quot; value=&quot;90&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class=&quot;nes-progress is-primary&quot; value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class=&quot;nes-progress is-success&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class=&quot;nes-progress is-warning&quot; value=&quot;30&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class=&quot;nes-progress is-error&quot; value=&quot;10&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <p>&lt;progress class=&quot;nes-progress is-pattern&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;progress class=&quot;nes-progress&quot; value=&quot;90&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
+&lt;progress class=&quot;nes-progress is-primary&quot; value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
+&lt;progress class=&quot;nes-progress is-success&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
+&lt;progress class=&quot;nes-progress is-warning&quot; value=&quot;30&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
+&lt;progress class=&quot;nes-progress is-error&quot; value=&quot;10&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
+&lt;progress class=&quot;nes-progress is-pattern&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
     </section>
 
     <section class="nes-container with-title" class="badges">
@@ -574,42 +560,40 @@
       <span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
     </section>
     <section class="nes-container code" id="code-badges">
-      <pre><code>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
-            &lt;span class=&quot;is-dark&quot;&gt;NES.css&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
-            &lt;span class=&quot;is-primary&quot;&gt;is&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
-            &lt;span class=&quot;is-success&quot;&gt;a&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
-            &lt;span class=&quot;is-warning&quot;&gt;great&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
-            &lt;span class=&quot;is-error&quot;&gt;framework!&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
-            &lt;span class=&quot;is-dark&quot;&gt;npm&lt;/span&gt;
-            &lt;span class=&quot;is-primary&quot;&gt;1.1.0&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
-            &lt;span class=&quot;is-dark&quot;&gt;test&lt;/span&gt;
-            &lt;span class=&quot;is-success&quot;&gt;100%&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
-            &lt;span class=&quot;is-warning&quot;&gt;
-                &lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;
-            &lt;/span&gt;
-            &lt;span class=&quot;is-primary&quot;&gt;Icons&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
-            &lt;span class=&quot;is-dark&quot;&gt;hi&lt;/span&gt;
-            &lt;span class=&quot;is-warning&quot;&gt;Text&lt;/span&gt;
-        &lt;/a&gt;</p>
-        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
-      </code></pre>
+      <pre class="sample-code"><code class="html">&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+  &lt;span class=&quot;is-dark&quot;&gt;NES.css&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+  &lt;span class=&quot;is-primary&quot;&gt;is&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+  &lt;span class=&quot;is-success&quot;&gt;a&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+  &lt;span class=&quot;is-warning&quot;&gt;great&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
+  &lt;span class=&quot;is-error&quot;&gt;framework!&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
+  &lt;span class=&quot;is-dark&quot;&gt;npm&lt;/span&gt;
+  &lt;span class=&quot;is-primary&quot;&gt;1.1.0&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge is-splited&quot;&gt;
+  &lt;span class=&quot;is-dark&quot;&gt;test&lt;/span&gt;
+  &lt;span class=&quot;is-success&quot;&gt;100%&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
+  &lt;span class=&quot;is-warning&quot;&gt;
+      &lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;
+  &lt;/span&gt;
+  &lt;span class=&quot;is-primary&quot;&gt;Icons&lt;/span&gt;
+&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;nes-badge is-icon&quot;&gt;
+  &lt;span class=&quot;is-dark&quot;&gt;hi&lt;/span&gt;
+  &lt;span class=&quot;is-warning&quot;&gt;Text&lt;/span&gt;
+&lt;/a&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -650,37 +634,35 @@
         <span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
       </section>
       <section class="nes-container code" id="code-reaction">
-        <pre><code>
-          <p>&lt;i class=&quot;nes-icon heart is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon heart&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon heart is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon heart is-large&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon heart is-empty&quot;&gt;&lt;/i&gt;</p>
+        <pre class="sample-code"><code class="html">&lt;i class=&quot;nes-icon heart is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon heart&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon heart is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon heart is-large&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon heart is-empty&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon star is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon star is-half is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-half&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-half is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-half is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon star is-half is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-half&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-half is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-half is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon star is-transparent is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-transparent&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-transparent is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon star is-transparent is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon star is-transparent is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-transparent&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-transparent is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon star is-transparent is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon star is-empty&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon star is-empty&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon like is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon like&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon like is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon like is-large&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon like is-empty&quot;&gt;&lt;/i&gt;</p>
-          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
-        </code></pre>
+&lt;i class=&quot;nes-icon like is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon like&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon like is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon like is-large&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon like is-empty&quot;&gt;&lt;/i&gt;</code></pre>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
       </section>
 
       <section class="nes-container with-title">
@@ -745,63 +727,61 @@
         <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
       </section>
       <section class="nes-container code" id="code-sns">
-        <pre><code>
-          <p>&lt;i class=&quot;nes-icon twitter is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitter&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitter is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitter is-large&quot;&gt;&lt;/i&gt;</p>
+        <pre class="sample-code"><code class="html">&lt;i class=&quot;nes-icon twitter is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitter&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitter is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitter is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon facebook is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon facebook&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon facebook is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon facebook is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon facebook is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon facebook&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon facebook is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon facebook is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon github is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon github&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon github is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon github is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon github is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon github&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon github is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon github is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon youtube is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon youtube&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon youtube is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon youtube is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon youtube is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon youtube&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon youtube is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon youtube is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon google is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon google&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon google is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon google is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon google is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon google&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon google is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon google is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon medium is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon medium is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon medium is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon medium is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon medium is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon medium is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon twitch is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitch&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitch is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon twitch is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon twitch is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitch&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitch is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon twitch is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon reddit is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon reddit&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon reddit is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon reddit is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon reddit is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon reddit&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon reddit is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon reddit is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon whatsapp is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon whatsapp&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon whatsapp is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon whatsapp is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon whatsapp is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon whatsapp&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon whatsapp is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon whatsapp is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon gmail is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon gmail&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon gmail is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon gmail is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon gmail is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon gmail&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon gmail is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon gmail is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon linkedin is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon linkedin&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</p>
-          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
-        </code></pre>
+&lt;i class=&quot;nes-icon linkedin is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon linkedin&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</code></pre>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
       </section>
 
       <section class="nes-container with-title">
@@ -835,32 +815,30 @@
         <span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
       </section>
       <section class="nes-container code" id="code-others">
-        <pre><code>
-          <p>&lt;i class=&quot;nes-icon close is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon close&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon close is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon close is-large&quot;&gt;&lt;/i&gt;</p>
+        <pre class="sample-code"><code class="html">&lt;i class=&quot;nes-icon close is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon close&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon close is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon close is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-octocat animate&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-octocat animate&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-icon trophy is-small&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon trophy&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon trophy is-medium&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-icon trophy is-large&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-icon trophy is-small&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon trophy&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon trophy is-medium&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-icon trophy is-large&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-mario&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-ash&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-pokeball&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-mario&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-ash&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-pokeball&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-bulbasaur&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-charmander&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-squirtle&quot;&gt;&lt;/i&gt;</p>
+&lt;i class=&quot;nes-bulbasaur&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-charmander&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-squirtle&quot;&gt;&lt;/i&gt;
 
-          <p>&lt;i class=&quot;nes-smartphone&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-phone&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-kirby&quot;&gt;&lt;/i&gt;</p>
-          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
-        </code></pre>
+&lt;i class=&quot;nes-smartphone&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-phone&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-kirby&quot;&gt;&lt;/i&gt;</code></pre>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
       </section>
 
       <section class="nes-container with-title">
@@ -875,13 +853,11 @@
         <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
       </section>
       <section class="nes-container code" id="code-controllers">
-        <pre><code>
-          <p>&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;</p>
-          <p>&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</p>
-          <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
-        </code></pre>
+        <pre class="sample-code"><code class="html">&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;
+&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</code></pre>
+        <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
       </section>
     </section>
 
diff --git a/package.json b/package.json
index f73b180..f90d045 100644
--- a/package.json
+++ b/package.json
@@ -146,11 +146,17 @@
       "string-quotes": "double",
       "at-rule-no-unknown": null,
       "scss/at-rule-no-unknown": true
-    }
+    },
+    "ignoreFiles": [
+      "demo/lib/*"
+    ]
   },
   "eslintConfig": {
     "extends": "airbnb-base"
   },
+  "eslintIgnore": [
+    "demo/lib/*"
+  ],
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

From 7894b8455bb471434c7c00e4e96d5e4e20d021d8 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Fri, 8 Feb 2019 21:58:26 +0900
Subject: [PATCH 13/14] feat(style.css): fix broken layout

---
 demo/style.css |  6 +-----
 index.html     | 35 +++++++++++++++++------------------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/demo/style.css b/demo/style.css
index 50c5f6f..2e09a03 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -115,14 +115,10 @@ div.containers > .nes-container {
 }
 
 .code {
-  box-sizing: border-box;
   display: none;
-  padding: 15px 0 0 15px;
+  padding: 0;
   margin-top: -20px;
-  overflow: auto;
   font-size: 0.85em;
-  color: #e76e55;
-  background-color: rgba(45, 45, 45, 0.9);
 }
 
 .copy {
diff --git a/index.html b/index.html
index 4fe9802..a2df59c 100644
--- a/index.html
+++ b/index.html
@@ -64,9 +64,8 @@
 &lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;
 &lt;button type=&quot;button&quot; class=&quot;nes-btn is-warning&quot;&gt;Warning&lt;/button&gt;
 &lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;
-&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;
-<button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
-</code></pre>
+&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;</code></pre>
+      <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
     </section>
 
     <section class="nes-container with-title">
@@ -523,37 +522,37 @@
       <h2 class="title">Badges</h2>
       <div id="badges">
         <a href="#" class="nes-badge">
-            <span class="is-dark">NES.css</span>
+          <span class="is-dark">NES.css</span>
         </a>
         <a href="#" class="nes-badge">
-            <span class="is-primary">is</span>
+          <span class="is-primary">is</span>
         </a>
         <a href="#" class="nes-badge">
-            <span class="is-success">a</span>
+          <span class="is-success">a</span>
         </a>
         <a href="#" class="nes-badge">
-            <span class="is-warning">great</span>
+          <span class="is-warning">great</span>
         </a>
         <a href="#" class="nes-badge">
-            <span class="is-error">framework!</span>
+          <span class="is-error">framework!</span>
         </a>
         <a href="#" class="nes-badge is-splited">
-            <span class="is-dark">npm</span>
-            <span class="is-primary">1.1.0</span>
+          <span class="is-dark">npm</span>
+          <span class="is-primary">1.1.0</span>
         </a>
         <a href="#" class="nes-badge is-splited">
-            <span class="is-dark">test</span>
-            <span class="is-success">100%</span>
+          <span class="is-dark">test</span>
+          <span class="is-success">100%</span>
         </a>
         <a href="#" class="nes-badge is-icon">
-            <span class="is-warning">
-                <i class="nes-icon star is-small"></i>
-            </span>
-            <span class="is-primary">Icons</span>
+          <span class="is-warning">
+            <i class="nes-icon star is-small"></i>
+          </span>
+          <span class="is-primary">Icons</span>
         </a>
         <a href="#" class="nes-badge is-icon">
-            <span class="is-dark">hi</span>
-            <span class="is-warning">Text</span>
+          <span class="is-dark">hi</span>
+          <span class="is-warning">Text</span>
         </a>
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-badges-code">&lt;&gt;</button>

From 341b44b5460e5ad30a1bf8cd235245cac19623e7 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <igor.lima@sabium.com.br>
Date: Fri, 8 Feb 2019 12:19:06 -0200
Subject: [PATCH 14/14] fix(html): fix alignment of the html in form and table
 component

---
 index.html | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index a2df59c..c96b062 100644
--- a/index.html
+++ b/index.html
@@ -298,7 +298,7 @@
       &lt;option value=&quot;1&quot;&gt;Not to be&lt;/option&gt;
     &lt;/select&gt;
   &lt;/div&gt;
-  &lt;/div&gt;</code></pre>
+&lt;/div&gt;</code></pre>
       <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
     </section>
 
@@ -441,30 +441,30 @@
     </section>
     <section class="nes-container code" id="code-table">
       <pre class="sample-code"><code class="html">&lt;div class=&quot;nes-table-responsive&quot;&gt;
-&lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Table.is-bordered&lt;/th&gt;
-      &lt;th&gt;Table.is-centered&lt;/th&gt;
-      &lt;th&gt;Table.is-centered&lt;/th&gt;
-      &lt;th&gt;Table.is-centered&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good night&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
-      &lt;td&gt;Thou hast had a good night&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
+  &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;
+        &lt;th&gt;Table.is-bordered&lt;/th&gt;
+        &lt;th&gt;Table.is-centered&lt;/th&gt;
+        &lt;th&gt;Table.is-centered&lt;/th&gt;
+        &lt;th&gt;Table.is-centered&lt;/th&gt;
+      &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;Thou hast had a good morning&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good afternoon&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good evening&lt;/td&gt;
+        &lt;td&gt;Thou hast had a good night&lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
 &lt;/div&gt;
 &lt;div class=&quot;nes-table-responsive&quot;&gt;
   &lt;table class=&quot;nes-table is-bordered is-dark&quot;&gt;