diff --git a/example/README.md b/example/README.md
new file mode 100644
index 0000000..8206951
--- /dev/null
+++ b/example/README.md
@@ -0,0 +1,14 @@
+## Commands 
+
+recompile css
+```sh
+tailwindcss -i ./content/css/main.css -o ./content/css/mini.css --minify
+```
+
+build, serve and watch
+```sh
+cabal run site -- watch
+```
+
+
+
diff --git a/example/content/css/custom.css b/example/content/css/custom.css
new file mode 100644
index 0000000..385ce1b
--- /dev/null
+++ b/example/content/css/custom.css
@@ -0,0 +1,34 @@
+.components-flex {
+  display: flex;
+  gap: 1.4em;
+  flex-direction: row;
+	align-items: center; 
+	justify-content: center;
+}
+
+.components-grid {
+  display: grid;
+  grid-column-gap: 1.4em;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+	align-items: center; 
+	justify-content: center;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-rows: auto;
+  display: grid;
+  grid-gap: 1em;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(calc(var(--page-width) / 12), 1fr)
+  );
+}
+
+@media only screen and (min-width: 45em) {
+  .components-grid {
+    grid-template-columns: 3fr 9fr;
+  }
+}
diff --git a/example/content/css/main.css b/example/content/css/main.css
new file mode 100644
index 0000000..3713c15
--- /dev/null
+++ b/example/content/css/main.css
@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  /* Set in tailwindconfig */
+  font-family: "jetbrains-mono";
+  src: local("jetbrains-mono"),
+    url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
\ No newline at end of file
diff --git a/example/content/css/mini.css b/example/content/css/mini.css
new file mode 100644
index 0000000..6c19162
--- /dev/null
+++ b/example/content/css/mini.css
@@ -0,0 +1 @@
+/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:jetbrains-mono;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.ml-3{margin-left:.75rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-48{width:12rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-auto{width:auto}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-3{padding-bottom:.75rem}.pr-2{padding-right:.5rem}.pt-2{padding-top:.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.italic{font-style:italic}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@font-face{font-family:jetbrains-mono;src:local("jetbrains-mono"),url(/fonts/JetBrainsMono-Medium.woff2) format("woff2")}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-inset:focus{--tw-ring-inset:inset}.focus\:ring-white:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus\:ring-offset-gray-800:focus{--tw-ring-offset-color:#1f2937}@media (min-width:640px){.sm\:static{position:static}.sm\:inset-auto{inset:auto}.sm\:ml-6{margin-left:1.5rem}.sm\:block{display:block}.sm\:hidden{display:none}.sm\:flex-row{flex-direction:row}.sm\:items-stretch{align-items:stretch}.sm\:justify-start{justify-content:flex-start}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pr-0{padding-right:0}}@media (min-width:768px){.md\:gap-8{gap:2rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:hidden{display:none}.lg\:px-8{padding-left:2rem;padding-right:2rem}}
\ No newline at end of file
diff --git a/site/css/normalize.css b/example/content/css/normalize.css
similarity index 100%
rename from site/css/normalize.css
rename to example/content/css/normalize.css
diff --git a/site/css/terminal.css b/example/content/css/terminal.css
similarity index 100%
rename from site/css/terminal.css
rename to example/content/css/terminal.css
diff --git a/site/css/terminal.min.css b/example/content/css/terminal.min.css
similarity index 100%
rename from site/css/terminal.min.css
rename to example/content/css/terminal.min.css
diff --git a/example/content/fonts/JetBrainsMono-Bold.woff2 b/example/content/fonts/JetBrainsMono-Bold.woff2
new file mode 100644
index 0000000..4917f43
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Bold.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-BoldItalic.woff2 b/example/content/fonts/JetBrainsMono-BoldItalic.woff2
new file mode 100644
index 0000000..536d3f7
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-BoldItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-ExtraBold.woff2 b/example/content/fonts/JetBrainsMono-ExtraBold.woff2
new file mode 100644
index 0000000..8f88c54
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-ExtraBold.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-ExtraBoldItalic.woff2 b/example/content/fonts/JetBrainsMono-ExtraBoldItalic.woff2
new file mode 100644
index 0000000..d1478ba
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-ExtraBoldItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-ExtraLight.woff2 b/example/content/fonts/JetBrainsMono-ExtraLight.woff2
new file mode 100644
index 0000000..b97239f
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-ExtraLight.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-ExtraLightItalic.woff2 b/example/content/fonts/JetBrainsMono-ExtraLightItalic.woff2
new file mode 100644
index 0000000..be01aac
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-ExtraLightItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-Italic.woff2 b/example/content/fonts/JetBrainsMono-Italic.woff2
new file mode 100644
index 0000000..d60c270
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Italic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-Light.woff2 b/example/content/fonts/JetBrainsMono-Light.woff2
new file mode 100644
index 0000000..6538498
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Light.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-LightItalic.woff2 b/example/content/fonts/JetBrainsMono-LightItalic.woff2
new file mode 100644
index 0000000..66ca3d2
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-LightItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-Medium.woff2 b/example/content/fonts/JetBrainsMono-Medium.woff2
new file mode 100644
index 0000000..669d04c
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Medium.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-MediumItalic.woff2 b/example/content/fonts/JetBrainsMono-MediumItalic.woff2
new file mode 100644
index 0000000..80cfd15
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-MediumItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-Regular.woff2 b/example/content/fonts/JetBrainsMono-Regular.woff2
new file mode 100644
index 0000000..40da427
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Regular.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-SemiBold.woff2 b/example/content/fonts/JetBrainsMono-SemiBold.woff2
new file mode 100644
index 0000000..5ead7b0
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-SemiBold.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-SemiBoldItalic.woff2 b/example/content/fonts/JetBrainsMono-SemiBoldItalic.woff2
new file mode 100644
index 0000000..c5dd294
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-SemiBoldItalic.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-Thin.woff2 b/example/content/fonts/JetBrainsMono-Thin.woff2
new file mode 100644
index 0000000..17270e4
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-Thin.woff2 differ
diff --git a/example/content/fonts/JetBrainsMono-ThinItalic.woff2 b/example/content/fonts/JetBrainsMono-ThinItalic.woff2
new file mode 100644
index 0000000..a643215
Binary files /dev/null and b/example/content/fonts/JetBrainsMono-ThinItalic.woff2 differ
diff --git a/example/content/index.html b/example/content/index.html
index 6dd191d..0240e11 100644
--- a/example/content/index.html
+++ b/example/content/index.html
@@ -1,16 +1,3 @@
----
-title: Home
----
-
-<h2>Welcome</h2>
-
-<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
-
-<p>Welcome to my blog!</p>
-
-<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
-
-<h2>Posts</h2>
-$partial("templates/post-list.html")$
-
-<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>
+<h1 class="text-3xl font-bold mx-auto">
+  Hello world!
+</h1>
diff --git a/example/content/scripts/nav.js b/example/content/scripts/nav.js
new file mode 100644
index 0000000..83347fd
--- /dev/null
+++ b/example/content/scripts/nav.js
@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Get all "navbar-burger" elements
+  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+    // Add a click event on each of them
+    $navbarBurgers.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        // Get the "main-nav" element
+        var $target = document.getElementById('main-nav');
+        // Toggle the class on "main-nav"
+        $target.classList.toggle('hidden');
+      });
+    });
+  }
+});
diff --git a/example/content/try_hakyll.html b/example/content/try_hakyll.html
new file mode 100644
index 0000000..6dd191d
--- /dev/null
+++ b/example/content/try_hakyll.html
@@ -0,0 +1,16 @@
+---
+title: Home
+---
+
+<h2>Welcome</h2>
+
+<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
+
+<p>Welcome to my blog!</p>
+
+<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
+
+<h2>Posts</h2>
+$partial("templates/post-list.html")$
+
+<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>
diff --git a/example/content/try_terminal.html b/example/content/try_terminal.html
new file mode 100644
index 0000000..3e80154
--- /dev/null
+++ b/example/content/try_terminal.html
@@ -0,0 +1,839 @@
+---
+title: Kompact.io
+---
+
+<hr/>
+<div class="components components-flex">
+  <div style="font-size: 7em; display: flex; align-items: center; justify-content: center; min-height: 1em">⟨K⟩</div>
+    <section>
+      <div class="terminal-card" style="font-size: 1.4em; text-align: center;">
+        <header>Kompact.io</header>
+        <div>
+          ~> Lean dapp development
+        </div>
+      </div>
+      <br />
+    </section>
+</div>
+<hr/>
+
+<p>A modern and minimal CSS framework for terminal lovers. ==> </p>
+
+<h2 id="project-goals">Project Goals</h2>
+<p>
+  Terminal CSS has no overhead and is lightweight
+  <strong>(~ 3k gzip)</strong>. The source is written in
+  <strong>pure css</strong> to be accessible for everybody and easy to
+  contribute.
+</p>
+<h2 id="markdown-terminal-css">Markdown ❤️ Terminal CSS</h2>
+<p>
+  It&#39;s perfect for your <em>personal website</em>, <em>blog</em>, or
+  <em>side project</em>.
+</p>
+<h2 id="how-to-use">How to use</h2>
+<p>
+  When using something like Webpack just install with
+  <code>npm i terminal.css</code>.
+</p>
+<pre><code class="language-js">import &#39;terminal.css&#39;</code></pre>
+<p>
+  Terminal CSS is also available via
+  <a href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css"
+    >CDN</a
+  >
+</p>
+<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css&quot; /&gt;</code></pre>
+<h2 id="themes">Themes</h2>
+<p>
+  To create your own theme just open the dev-tools and edit the CSS
+  Variables. Copy and paste it to your website. Done!
+</p>
+<br />
+
+<h2 id="contributors">Contributors</h2>
+<ul>
+  <li><a href="https://othyn.com/">Ben</a></li>
+  <li><a href="https://matiaskorhonen.fi/">Matias Korhonen</a></li>
+  <li><a href="https://github.com/nektro">Meghan</a></li>
+  <li><a href="https://ccat3z.xyz">Lingfeng Zhang</a></li>
+</ul>
+<br />
+
+<p>With ❤️ by <a href="https://jduri.com">Jonas D.</a></p>
+
+<hr />
+<div class="components components-grid">
+  <aside id="menu">
+    <h2>Components</h2>
+    <nav>
+      <ul>
+        <li><a href="#GridSystem">Grid System</a></li>
+        <li><a href="#Navigation">Navigation</a></li>
+        <li><a href="#NavigationList">Navigation List</a></li>
+        <li><a href="#Lists">Lists</a></li>
+        <li><a href="#Typography">Typography</a></li>
+        <li><a href="#Tables">Tables</a></li>
+        <li>
+          <a href="#SpecialElements">Special Elements</a>
+          <ul>
+            <li><a href="#Blockquote">Blockquote</a></li>
+            <li><a href="#Misc">Misc</a></li>
+          </ul>
+        </li>
+        <li><a href="#Forms">Forms</a></li>
+        <li><a href="#Progress">Progress Bar</a></li>
+        <li><a href="#Buttons">Buttons</a></li>
+        <li><a href="#Cards">Cards</a></li>
+        <li><a href="#Timeline">Timeline</a></li>
+        <li><a href="#Alerts">Alerts</a></li>
+        <li><a href="#Media">Media</a></li>
+        <li><a href="#Figure">Image with caption</a></li>
+        <li><a href="#highlightjs">Supports Highlight.js</a></li>
+      </ul>
+    </nav>
+
+    <h2>Documentation</h2>
+    <nav>
+      <ul>
+        <li><a href="#DocVariables">Variables</a></li>
+        <li><a href="#DocTypography">Typography</a></li>
+      </ul>
+    </nav>
+  </aside>
+
+  <main>
+    <section>
+      <header>
+        <h2 id="GridSystem">Grid System</h2>
+        <p>
+          Terminal CSS has no build-in grid system. However, you can roll
+          your own with Flexbox or CSS Grid.
+        </p>
+      </header>
+      <div class="image-grid">
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&1"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&2"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&3"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&4"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&5"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&6"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+        <a href="https://picsum.photos" style="border: none"
+          ><img
+            src="https://picsum.photos/200/300?random&7"
+            width="auto"
+            height="auto"
+            alt="random image"
+        /></a>
+      </div>
+    </section>
+    <hr />
+    <section>
+      <header><h2 id="Navigation">Navigation</h2></header>
+      <div class="terminal-nav">
+        <div class="terminal-logo">
+          <div class="logo terminal-prompt">
+            <a href="#" class="no-style">Logo</a>
+          </div>
+        </div>
+        <nav class="terminal-menu">
+          <ul>
+            <li><a class="menu-item" href="#">Item #1</a></li>
+            <li>
+              <a class="menu-item active" href="#">Active Item #2</a>
+            </li>
+            <li><a class="menu-item" href="#">Item #3</a></li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="NavigationList">Navigation Lists</h2></header>
+      <nav>
+        <ul>
+          <li><a href="#">Dashboard</a></li>
+          <li><a href="#">Members</a></li>
+          <li><a href="#">Settings</a></li>
+          <li>
+            <a href="#">Profile</a>
+            <ul>
+              <li><a href="#">Account</a></li>
+              <li><a href="#">Billing</a></li>
+              <li><a href="#">Logout</a></li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Lists">Lists</h2></header>
+      <ul>
+        <li>This is a list item</li>
+        <li>So is this - there could be more</li>
+        <li>
+          Make sure to style list items to:
+          <ul>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+            <li>Not forgetting child list items</li>
+          </ul>
+        </li>
+        <li>A couple more</li>
+        <li>Top-level list items</li>
+      </ul>
+      <p>Don't forget <strong>Ordered lists</strong>:</p>
+      <ol>
+        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+        <li>
+          Aliquam tincidunt mauris eu risus
+          <ol>
+            <li>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            </li>
+            <li>Aliquam tincidunt mauris eu risus.</li>
+          </ol>
+        </li>
+        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+        <li>Aliquam tincidunt mauris eu risus.</li>
+      </ol>
+      <p><strong>Description lists </strong>are also included.</p>
+      <dl>
+        <dt>Description list title 01</dt>
+        <dd>Description list description 01</dd>
+        <dt>Description list title 02</dt>
+        <dd>Description list description 02</dd>
+        <dd>Description list description 03</dd>
+      </dl>
+      <p>
+        A <strong>Table of content</strong>, which can be used as an index
+        for a blog archive.
+      </p>
+      <p>
+        Unlike regular lists, the TOC component
+        <em>only supports a single depth level.</em>
+      </p>
+      <ol class="terminal-toc">
+        <li>
+          <a href="#"
+            >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
+          >
+        </li>
+        <li>
+          <a href="#"
+            >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
+          >
+        </li>
+        <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
+        <li>
+          <a href="#"
+            >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
+          >
+        </li>
+        <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
+      </ol>
+    </section>
+
+    <hr />
+    <section>
+      <header>
+        <h2 id="Typography">Typography</h2>
+        <h1>Level 1 Heading</h1>
+        <p>
+          Pellentesque habitant morbi tristique senectus et netus et
+          malesuada fames ac turpis egestas. Vestibulum tortor quam,
+          feugiat vitae, ultricies eget, tempor sit amet, ante.
+        </p>
+        <h2>Level 2 Heading</h2>
+        <p>
+          Pellentesque habitant morbi tristique senectus et netus et
+          malesuada fames ac turpis egestas. Vestibulum tortor quam,
+          feugiat vitae, ultricies eget, tempor sit amet, ante.
+        </p>
+        <h3>Level 3 Heading</h3>
+        <p>
+          Pellentesque habitant morbi tristique senectus et netus et
+          malesuada fames ac turpis egestas. Vestibulum tortor quam,
+          feugiat vitae, ultricies eget, tempor sit amet, ante.
+        </p>
+        <h4>Level 4 Heading</h4>
+        <h5>Level 5 Heading</h5>
+        <h6>Level 6 Heading</h6>
+      </header>
+    </section>
+
+    <hr />
+    <section>
+      <header>
+        <h2 id="Tables">Tables</h2>
+      </header>
+      <table>
+        <caption>
+          Most Downloaded Movies on BitTorrent, 2011
+        </caption>
+        <thead>
+          <tr>
+            <th>Rank</th>
+            <th>Movie</th>
+            <th>Downloads</th>
+          </tr>
+        </thead>
+        <tfoot>
+          <tr>
+            <th colspan="4">torrentfreak.com</th>
+          </tr>
+        </tfoot>
+        <tbody>
+          <tr>
+            <th>1</th>
+            <td>Fast Five</td>
+            <td>9,260,000</td>
+          </tr>
+          <tr>
+            <th>2</th>
+            <td>The Hangover II</td>
+            <td>8,840,000</td>
+          </tr>
+          <tr>
+            <th>3</th>
+            <td>Thor</td>
+            <td>8,330,000</td>
+          </tr>
+          <tr>
+            <th>4</th>
+            <td>Source Code</td>
+            <td>7,910,000</td>
+          </tr>
+          <tr>
+            <th>5</th>
+            <td>I Am Number Four</td>
+            <td>7,670,000</td>
+          </tr>
+          <tr>
+            <th>6</th>
+            <td>Sucker Punch</td>
+            <td>7,200,000</td>
+          </tr>
+          <tr>
+            <th>7</th>
+            <td>127 Hours</td>
+            <td>6,910,000</td>
+          </tr>
+          <tr>
+            <th>8</th>
+            <td>Rango</td>
+            <td>6,480,000</td>
+          </tr>
+          <tr>
+            <th>9</th>
+            <td>The King’s Speech</td>
+            <td>6,250,000</td>
+          </tr>
+          <tr>
+            <th>10</th>
+            <td>Harry Potter and the Deathly Hallows Part 2</td>
+            <td>6,030,000</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <hr />
+    <section>
+      <header><h2 id="SpecialElements">Special Elements</h2></header>
+      <p>Terminal CSS also supports a range of special elements.</p>
+
+      <h3 id="Blockquote">Blockquote</h3>
+      <blockquote>
+        <p>
+          <em>This is a properly formatted blockquote, btw.</em> Measuring
+          programming progress by lines of code is like measuring aircraft
+          building progress by weight.
+        </p>
+        <footer>
+          <cite
+            ><a href="http://www.thegatesnotes.com">Bill Gates</a></cite
+          >
+        </footer>
+      </blockquote>
+      <h3 id="Misc">Misc</h3>
+      <h5 class="terminal-prompt">Terminal Prompt</h5>
+      <p>
+        I am <a href="?abc123">the a tag</a> example<br />
+        I am <abbr title="test">the abbr tag</abbr> example<br />
+        I am <b>the b tag</b> example<br />
+        I am <cite>the cite tag</cite> example<br />
+        I am <code>the code tag</code> example<br />
+        I am <del>the del tag</del> example<br />
+        I am <dfn>the dfn tag</dfn> example<br />
+        I am <em>the em tag</em> example<br />
+        I am <i>the i tag</i> example<br />
+        I am <ins>the ins tag</ins> example<br />
+        I am <kbd>the kbd tag</kbd> example<br />
+        I am <q>the q tag</q> example<br />
+        I am <samp>the samp tag</samp> example<br />
+        I am <small>the small tag</small> example<br />
+        I am <span>the span tag</span> example<br />
+        I am <strong>the strong tag</strong> example<br />
+        I am <sub>the sub tag</sub> example<br />
+        I am <sup>the sup tag</sup> example<br />
+        I am <var>the var tag</var> example<br />
+      </p>
+
+      <h4 id="Address">Address</h4>
+      <address>
+        Mozilla Foundation<br />
+        1981 Landings Drive<br />
+        Building K<br />
+        Mountain View, CA 94043-0801<br />
+        USA
+      </address>
+      <br />
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Forms">Forms</h2></header>
+      <form action="#">
+        <fieldset>
+          <legend>Form legend</legend>
+          <div class="form-group">
+            <label for="email">Email input:</label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              minlength="5"
+              placeholder="test"
+            />
+          </div>
+          <div class="form-group">
+            <label for="text">Text input:</label>
+            <input
+              id="text"
+              name="text"
+              type="text"
+              required
+              minlength="5"
+              placeholder="test"
+            />
+          </div>
+          <div class="form-group">
+            <label for="itext">Invalid input (min-length 10):</label>
+            <input id="itext" name="itext" type="text" minlength="10" />
+          </div>
+          <div class="form-group">
+            <label for="pw">Password input:</label>
+            <input type="password" id="pw" name="pw" value="password" />
+          </div>
+          <div class="form-group">
+            <label for="radio">Radio input:</label>
+            <input name="radio" type="radio" id="radio" />
+          </div>
+          <div class="form-group">
+            <label for="check">Checkbox input:</label>
+            <input for="check" type="checkbox" id="check" />
+          </div>
+          <div class="form-group">
+            <label for="select">Select field:</label>
+            <select id="select" name="select">
+              <option>Option 01</option>
+              <option>Option 02</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="tarea">Textarea:</label>
+            <textarea id="tarea" cols="30" rows="5" name=="tarea">
+            </textarea
+          </div>
+          <div class="form-group">
+            <label for="submit">Input Button:</label>
+            <button
+              class="btn btn-default"
+              type="submit"
+              role="button"
+              name="submit"
+              id="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </fieldset>
+      </form>
+    </section>
+    <hr />
+    <section>
+      <header><h2 id="Progress">Progress Bar</h2></header>
+      <br />
+      <p>With only an arrow</p>
+      <div class="progress-bar">
+        <div class="progress-bar-filled" style="width: 40%"></div>
+      </div>
+      <p>With a percentage showing above the arrow</p>
+      <div class="progress-bar progress-bar-show-percent">
+        <div
+          class="progress-bar-filled"
+          style="width: 30%"
+          data-filled="Loading 30%"
+        ></div>
+      </div>
+      <p>Without arrow</p>
+      <div class="progress-bar progress-bar-no-arrow">
+        <div
+          class="progress-bar-filled"
+          style="width: 60%"
+          data-filled="Loading 60%"
+        ></div>
+      </div>
+      <br />
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Buttons">Buttons</h2></header>
+      <button class="btn btn-default">Default</button><br /><br />
+      <button class="btn btn-primary">Primary</button><br /><br />
+      <button class="btn btn-error">Error</button><br /><br />
+      <button class="btn btn-default btn-ghost">Ghost Button</button
+      ><br /><br />
+      <button class="btn btn-primary btn-ghost">Ghost Button</button
+      ><br /><br />
+      <button class="btn btn-error btn-ghost">Ghost Button</button
+      ><br /><br />
+      <button class="btn btn-primary btn-block">Block Level Button</button
+      ><br /><br />
+      <p>Button Group</p>
+      <div class="btn-group">
+        <button class="btn btn-default btn-ghost">Left</button>
+        <button class="btn btn-default btn-ghost">Middle</button>
+        <button class="btn btn-default btn-ghost">Right</button>
+      </div>
+      <br />
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Cards">Cards</h2></header>
+      <div class="terminal-card">
+        <header>Card Title</header>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          Expedita, quas ex vero enim in doloribus officiis ullam vel nam
+          esse sapiente velit incidunt. Eaque quod et, aut maiores
+          excepturi sint.
+        </div>
+      </div>
+      <br />
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Timeline">Timeline</h2></header>
+      <div class="terminal-timeline">
+        <div class="terminal-card">
+          <header>Card Title</header>
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Expedita, quas ex vero enim in doloribus officiis ullam vel
+            nam esse sapiente velit incidunt. Eaque quod et, aut maiores
+            excepturi sint.
+          </div>
+        </div>
+        <div class="terminal-card">
+          <header>Card Title</header>
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Expedita, quas ex vero enim in doloribus officiis ullam vel
+            nam esse sapiente velit incidunt. Eaque quod et, aut maiores
+            excepturi sint.
+          </div>
+        </div>
+      </div>
+      <br />
+    </section>
+
+    <hr />
+    <section>
+      <header><h2 id="Alerts">Alerts</h2></header>
+      <div class="terminal-alert">Default message</div>
+      <div class="terminal-alert terminal-alert-primary">
+        Primary message
+      </div>
+      <div class="terminal-alert terminal-alert-error">Error message</div>
+    </section>
+    <hr />
+    <section>
+      <header><h2 id="Figure">Image with caption</h2></header>
+      <figure>
+        <img
+          src="https://picsum.photos/1000/600?random&imageWithCaption"
+          alt="Image with caption"
+          title="Image with caption"
+        />
+        <figcaption>Image with caption</figcaption>
+      </figure>
+    </section>
+
+    <hr />
+    <section>
+      <header>
+        <h2 id="highlightjs">Supports Highlight.js</h2>
+        <p>
+          Terminal CSS comes with a build in theme for
+          <a
+            href="https://highlightjs.org/"
+            target="_black"
+            rel="noopener noreferrer"
+            >Highlight.js</a
+          >
+        </p>
+      </header>
+      <pre>
+<code>
+.hljs {
+display: block;
+overflow-x: auto;
+padding: 0.5em;
+background: var(--block-background-color);
+color: var(--font-color);
+}
+
+.hljs-comment,
+.hljs-quote {
+color: var(--secondary-color);
+}
+
+.hljs-variable {
+color: var(--font-color);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-built_in,
+.hljs-name,
+.hljs-tag {
+color: var(--primary-color);
+}
+
+.hljs-string,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-literal,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-addition {
+color: var(--secondary-color);
+}
+
+.hljs-string {
+color: var(--secondary-color);
+}
+
+.hljs-deletion,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-meta {
+color: var(--primary-color);
+}
+
+.hljs-doctag {
+color: var(--secondary-color);
+}
+
+.hljs-attr {
+color: var(--primary-color);
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link {
+color: var(--primary-color);
+}
+
+
+.hljs-emphasis {
+font-style: italic;
+}
+
+.hljs-strong {
+font-weight: bold;
+}
+</code>
+</pre>
+    </section>
+
+    <hr />
+    <section>
+      <header><h2>Documentation</h2></header>
+      <p>
+        Most of the documentation is still at an early stage. For more
+        details, please have a look at the source of this website.
+      </p>
+      <section>
+        <header>
+          <h2 id="DocVariables">Variables</h2>
+        </header>
+        <p>
+          Customizing the style of Terminal CSS with CSS Variables is
+          easy.
+        </p>
+
+        <dl class="custom-dl">
+          <style>
+            .custom-dl dt {
+              font-weight: 600;
+            }
+
+            .custom-dl dd.italic {
+              font-style: italic;
+            }
+          </style>
+          <dt>--global-font-size</dt>
+          <dd>The Base font size</dd>
+          <dt>--global-line-height</dt>
+          <dd>
+            The base line height. Modify this to achieve the best
+            readability.
+          </dd>
+          <dt>--font-stack</dt>
+          <dd>The fonts for the website.</dd>
+          <dd>
+            Use <code>@font-face</code> or any other font provider to
+            include your custom fonts.
+          </dd>
+          <dt>--mono-font-stack</dt>
+          <dd>Same as above but for <code>code</code>.</dd>
+          <dt>--background-color</dt>
+          <dd>The page background color</dd>
+          <dt>--font-color</dt>
+          <dd>
+            The base font color for text, headlines, blockquotes, lists,
+            etc.
+          </dd>
+          <dt>--invert-font-color</dt>
+          <dd>
+            Sometimes text appears on a colored background. Adjust this
+            color to improve readability.
+          </dd>
+          <dt>--primary-color</dt>
+          <dd>The primary color is used for links and buttons.</dd>
+          <dt>--secondary-color</dt>
+          <dd>
+            The secondary color is more subtle then the primary color.
+            It's used for code highlighting and image captions.
+          </dd>
+          <dt>--error-color</dt>
+          <dd>Used for error alerts and form validation.</dd>
+          <dt>--progress-bar-background</dt>
+          <dd>The background color of progress bars.</dd>
+          <dt>--progress-bar-fill</dt>
+          <dd>
+            The fill color, indicating the progress in progress bars.
+          </dd>
+          <dt>--code-bg-color</dt>
+          <dd>
+            The background color of <code>&lt;code&gt;</code> elements.
+          </dd>
+          <dt>--input-style</dt>
+          <dd>
+            The style of input element borders. Possible values are:
+          </dd>
+          <dd class="italic">
+            none, solid, dotted, dashed, double, groove, ridge, inset,
+            outset, hidden, inherit, initial, unset
+          </dd>
+          <dt>--display-h1-decoration</dt>
+          <dd>
+            Show a double dash below <code>h1</code> elements. Possible
+            values are:
+          </dd>
+          <dd class="italic">block, none</dd>
+        </dl>
+      </section>
+
+      <hr />
+      <section>
+        <header>
+          <h2 id="DocTypography">Typography</h2>
+        </header>
+        <p>
+          Terminal CSS uses a single font size for almost all elements.
+          However, there is a way to use browser default font sizes if you
+          wish.
+        </p>
+        <dl class="custom-dl">
+          <dt>Single font size</dt>
+          <dd>
+            Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If
+            you leave that option, it will fallback to browser defaults.
+            See <a href="/sans-serif/">here</a>.
+          </dd>
+        </dl>
+      </section>
+    </section>
+    <hr />
+    <footer>
+      <p>
+        This project is inspired by
+        <a
+          href="https://egoist.sh/"
+          target="_blank"
+          rel="noopener noreferer"
+          >@egoist's</a
+        >
+        work -
+        <a href="https://github.com/egoist/hack" rel="noopener noreferer"
+          >hack.css</a
+        >
+      </p>
+    </footer>
+
+    <hr />
+    <section>
+      <header></header>
+      <p>Version: 0.7.2 <a href="#menu">Top</a></p>
+    </section>
+  </main>
+</div>
diff --git a/example/output.css b/example/output.css
new file mode 100644
index 0000000..6b9da43
--- /dev/null
+++ b/example/output.css
@@ -0,0 +1,614 @@
+/*
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: jetbrains-mono;
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+@font-face {
+  font-family: "jetbrains-mono";
+
+  src: local("jetbrains-mono"),
+    url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
+
+body {
+  font-family: "jetbrains-mono";
+}
diff --git a/example/site.hs b/example/site.hs
index dc0135b..64c0c68 100644
--- a/example/site.hs
+++ b/example/site.hs
@@ -11,10 +11,18 @@ main = hakyll $ do
         route rmContentPrefix
         compile copyFileCompiler
 
+    match "content/scripts/*" $ do
+        route   rmContentPrefix
+        compile copyFileCompiler
+
     match "content/css/*" $ do
         route   rmContentPrefix
         compile compressCssCompiler
 
+    match "content/fonts/*" $ do
+        route   rmContentPrefix
+        compile copyFileCompiler
+
     match (fromList ["content/about.rst", "content/contact.markdown"]) $ do
         route   $ setExtension "html"
         compile $ pandocCompiler
diff --git a/example/tailwind.config.js b/example/tailwind.config.js
new file mode 100644
index 0000000..9c0ac9a
--- /dev/null
+++ b/example/tailwind.config.js
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./content/**/*.{html,js}",
+    "./templates/**/*.{html,js}",
+  ],
+  theme: {
+    extend: {},
+    fontFamily: {
+      'sans' : ['jetbrains-mono',],
+    }
+  },
+  plugins: [],
+}
+
diff --git a/example/templates/about.html b/example/templates/about.html
new file mode 100644
index 0000000..f5ceda4
--- /dev/null
+++ b/example/templates/about.html
@@ -0,0 +1,27 @@
+<section id="about" class="py-8 px-2 flex flex-col gap-4">
+  <header class="text-3xl">
+    # about
+  </header>
+  <div>
+    Kompact.io is dapp dev house.
+
+    Our focus: 
+    <ul class="list-decoration"> 
+    <li> 
+     safety-first 
+    </li>
+    <li> 
+      fast turn around
+    </li>
+    <li> 
+      integration support
+    </li>
+    </ul>
+    <div>
+    Our typical process: 
+    <div>
+    Idea -> Spec -> Impl -> Test -> Handover
+    </div>
+    </div>
+  </div>
+</section>
diff --git a/example/templates/contact.html b/example/templates/contact.html
new file mode 100644
index 0000000..0666de5
--- /dev/null
+++ b/example/templates/contact.html
@@ -0,0 +1,8 @@
+<section id="contact" class="py-8 px-2 flex flex-col gap-4">
+  <header class="text-3xl">
+    # contact 
+  </header>
+  <div>
+    Reach us on : <a href="email:hi@kompact.io"> hi@kompact.io </a>
+  </div>
+</section>
diff --git a/example/templates/default.html b/example/templates/default.html
index e91badc..e8e5361 100644
--- a/example/templates/default.html
+++ b/example/templates/default.html
@@ -1,33 +1,22 @@
 <!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>My Hakyll Blog - $title$</title>
-        <link rel="stylesheet" href="/css/default.css" />
-    </head>
-    <body>
-        <header>
-            <div class="logo">
-                <a href="/">My Hakyll Blog</a>
-            </div>
-            <nav>
-                <a href="/">Home</a>
-                <a href="/about.html">About</a>
-                <a href="/contact.html">Contact</a>
-                <a href="/archive.html">Archive</a>
-            </nav>
-        </header>
-
-        <main role="main">
-            <h1>$title$</h1>
-            $body$
-        </main>
-
-        <footer>
-            Site proudly generated by
-            <a href="http://jaspervdj.be/hakyll">Hakyll</a>
-        </footer>
-    </body>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="/css/mini.css" rel="stylesheet">
+</head>
+<body>
+<div class="container mx-auto" >
+<hr/>
+$partial("templates/nav.html")$
+<hr/>
+$partial("templates/hero.html")$
+<hr/>
+$partial("templates/about.html")$
+<hr/>
+$partial("templates/contact.html")$
+<hr/>
+$body$
+</div>
+</body>
 </html>
diff --git a/example/templates/hero.html b/example/templates/hero.html
new file mode 100644
index 0000000..9fd7657
--- /dev/null
+++ b/example/templates/hero.html
@@ -0,0 +1,12 @@
+<section id="hero" class="py-8 px-2 min-h-96">
+  <div class="flex sm:flex-row justify-around">
+    <div class="text-6xl"> 
+      ⟨K⟩ 
+    </div>
+    <div class="flex flex-col gap-2">
+      <div>withKompact {} do </div>
+      <div> ... x <- lean dapp dev </div>
+      <div> ... run x </div>
+    </div>
+  </div>
+</section>
diff --git a/example/templates/nav.html b/example/templates/nav.html
new file mode 100644
index 0000000..c07c955
--- /dev/null
+++ b/example/templates/nav.html
@@ -0,0 +1,21 @@
+<nav class="">
+  <div class="relative flex h-16 items-center justify-between">
+    <div>
+      Kompact.io 
+    </div>
+    <div>
+    <ul class="flex flex-row gap-4 md:gap-8">
+    <li>
+    <a href="#items">
+    Items
+    </a>
+    </li>
+    <li>
+    <a href="#items">
+    Items
+    </a>
+    </li>
+    </ul>
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/example/templates/tailwind-nav-example.html b/example/templates/tailwind-nav-example.html
new file mode 100644
index 0000000..b9ffa17
--- /dev/null
+++ b/example/templates/tailwind-nav-example.html
@@ -0,0 +1,89 @@
+<nav class="">
+  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+    <div class="relative flex h-16 items-center justify-between">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+        <!-- Mobile menu button-->
+        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+          <!--
+            Icon when menu is closed.
+
+            Menu open: "hidden", Menu closed: "block"
+          -->
+          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          </svg>
+          <!--
+            Icon when menu is open.
+
+            Menu open: "block", Menu closed: "hidden"
+          -->
+          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+        <div class="flex flex-shrink-0 items-center">
+          <img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+          <img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
+        </div>
+        <div class="hidden sm:ml-6 sm:block">
+          <div class="flex space-x-4">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
+            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Team</a>
+            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Projects</a>
+            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
+          </div>
+        </div>
+      </div>
+      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+        <button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+          <span class="sr-only">View notifications</span>
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+          </svg>
+        </button>
+
+        <!-- Profile dropdown -->
+        <div class="relative ml-3">
+          <div>
+            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+              <span class="sr-only">Open user menu</span>
+              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+            </button>
+          </div>
+
+          <!--
+            Dropdown menu, show/hide based on menu state.
+
+            Entering: "transition ease-out duration-100"
+              From: "transform opacity-0 scale-95"
+              To: "transform opacity-100 scale-100"
+            Leaving: "transition ease-in duration-75"
+              From: "transform opacity-100 scale-100"
+              To: "transform opacity-0 scale-95"
+          -->
+          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+            <!-- Active: "bg-gray-100", Not Active: "" -->
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <div class="sm:hidden" id="mobile-menu">
+    <div class="space-y-1 px-2 pb-3 pt-2">
+      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+      <a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Team</a>
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Projects</a>
+      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/example/templates/terminal_default.html b/example/templates/terminal_default.html
new file mode 100644
index 0000000..83d97b4
--- /dev/null
+++ b/example/templates/terminal_default.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta
+      name="msapplication-TileImage"
+      content="/favicon/ms-icon-144x144.png"
+    />
+    <meta name="theme-color" content="#ffffff" />
+    <title>$title$</title>
+    <meta
+      name="description"
+      content="Lean dapp development"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/normalize.css" />
+    <link rel="stylesheet" href="/css/terminal.css" />
+    <link rel="stylesheet" href="/css/custom.css" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="/favicon/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="/favicon/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="/favicon/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="/favicon/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/favicon/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/favicon/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/favicon/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/favicon/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicon/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/favicon/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="/favicon/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon/favicon-16x16.png"
+    />
+  </head>
+  <body class="terminal">
+    <div class="container">
+      <div class="terminal-nav">
+        <header class="terminal-logo">
+          <div class="logo terminal-prompt">
+            <a href="https://kompact.io" class="no-style">kompact.io</a>
+          </div>
+        </header>
+        <nav class="terminal-menu">
+          <ul vocab="https://schema.org/" typeof="BreadcrumbList">
+            <li>
+              <a href="https://terminalcss.xyz" class="menu-item active"
+                ><span>Light</span></a
+              ><meta property="position" />
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+
+    <div class="container">$body$</div>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        document.querySelectorAll("pre code").forEach((block) => {
+          window.hljs.highlightBlock(block);
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/flake.nix b/flake.nix
index c04ecfe..4dee30e 100644
--- a/flake.nix
+++ b/flake.nix
@@ -74,6 +74,7 @@
             nil
             nodePackages_latest.vscode-html-languageserver-bin
             nodePackages_latest.prettier
+            nodePackages.tailwindcss
             haskellPackages.hakyll
             zlib
           ];
diff --git a/site/index.html b/site/index.html
deleted file mode 100644
index 5394471..0000000
--- a/site/index.html
+++ /dev/null
@@ -1,971 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="msapplication-TileColor" content="#ffffff" />
-    <meta
-      name="msapplication-TileImage"
-      content="/favicon/ms-icon-144x144.png"
-    />
-    <meta name="theme-color" content="#ffffff" />
-    <title>Terminal CSS</title>
-    <meta
-      name="description"
-      content="A modern and minimal CSS framework for terminal lovers."
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/css/normalize.css" />
-    <link rel="stylesheet" href="/css/terminal.css" />
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="/favicon/apple-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="/favicon/apple-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="/favicon/apple-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="/favicon/apple-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="/favicon/apple-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="/favicon/apple-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="/favicon/apple-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="/favicon/apple-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/favicon/apple-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="192x192"
-      href="/favicon/android-icon-192x192.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="/favicon/favicon-96x96.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/favicon/favicon-16x16.png"
-    />
-    <style>
-      .components-grid {
-        display: grid;
-        grid-column-gap: 1.4em;
-        grid-template-columns: auto;
-        grid-template-rows: auto;
-      }
-
-      .image-grid {
-        display: grid;
-        grid-template-rows: auto;
-        display: grid;
-        grid-gap: 1em;
-        grid-template-rows: auto;
-        grid-template-columns: repeat(
-          auto-fit,
-          minmax(calc(var(--page-width) / 12), 1fr)
-        );
-      }
-
-      @media only screen and (min-width: 70em) {
-        .components-grid {
-          grid-template-columns: 3fr 9fr;
-        }
-      }
-    </style>
-  </head>
-  <body class="terminal">
-    <div class="container">
-      <div class="terminal-nav">
-        <header class="terminal-logo">
-          <div class="logo terminal-prompt">
-            <a href="https://terminalcss.xyz" class="no-style">kompact.io</a>
-          </div>
-        </header>
-        <nav class="terminal-menu">
-          <ul vocab="https://schema.org/" typeof="BreadcrumbList">
-            <li>
-              <a href="https://terminalcss.xyz" class="menu-item active"
-                ><span>Light</span></a
-              ><meta property="position" />
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </div>
-
-    <div class="container">
-      <p>A modern and minimal CSS framework for terminal lovers.</p>
-
-      <h2 id="project-goals">Project Goals</h2>
-      <p>
-        Terminal CSS has no overhead and is lightweight
-        <strong>(~ 3k gzip)</strong>. The source is written in
-        <strong>pure css</strong> to be accessible for everybody and easy to
-        contribute.
-      </p>
-      <h2 id="markdown-terminal-css">Markdown ❤️ Terminal CSS</h2>
-      <p>
-        It&#39;s perfect for your <em>personal website</em>, <em>blog</em>, or
-        <em>side project</em>.
-      </p>
-      <h2 id="how-to-use">How to use</h2>
-      <p>
-        When using something like Webpack just install with
-        <code>npm i terminal.css</code>.
-      </p>
-      <pre><code class="language-js">import &#39;terminal.css&#39;</code></pre>
-      <p>
-        Terminal CSS is also available via
-        <a href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css"
-          >CDN</a
-        >
-      </p>
-      <pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css&quot; /&gt;</code></pre>
-      <h2 id="themes">Themes</h2>
-      <p>
-        To create your own theme just open the dev-tools and edit the CSS
-        Variables. Copy and paste it to your website. Done!
-      </p>
-      <br />
-
-      <h2 id="contributors">Contributors</h2>
-      <ul>
-        <li><a href="https://othyn.com/">Ben</a></li>
-        <li><a href="https://matiaskorhonen.fi/">Matias Korhonen</a></li>
-        <li><a href="https://github.com/nektro">Meghan</a></li>
-        <li><a href="https://ccat3z.xyz">Lingfeng Zhang</a></li>
-      </ul>
-      <br />
-
-      <p>With ❤️ by <a href="https://jduri.com">Jonas D.</a></p>
-
-      <hr />
-      <div class="components components-grid">
-        <aside id="menu">
-          <h2>Components</h2>
-          <nav>
-            <ul>
-              <li><a href="#GridSystem">Grid System</a></li>
-              <li><a href="#Navigation">Navigation</a></li>
-              <li><a href="#NavigationList">Navigation List</a></li>
-              <li><a href="#Lists">Lists</a></li>
-              <li><a href="#Typography">Typography</a></li>
-              <li><a href="#Tables">Tables</a></li>
-              <li>
-                <a href="#SpecialElements">Special Elements</a>
-                <ul>
-                  <li><a href="#Blockquote">Blockquote</a></li>
-                  <li><a href="#Misc">Misc</a></li>
-                </ul>
-              </li>
-              <li><a href="#Forms">Forms</a></li>
-              <li><a href="#Progress">Progress Bar</a></li>
-              <li><a href="#Buttons">Buttons</a></li>
-              <li><a href="#Cards">Cards</a></li>
-              <li><a href="#Timeline">Timeline</a></li>
-              <li><a href="#Alerts">Alerts</a></li>
-              <li><a href="#Media">Media</a></li>
-              <li><a href="#Figure">Image with caption</a></li>
-              <li><a href="#highlightjs">Supports Highlight.js</a></li>
-            </ul>
-          </nav>
-
-          <h2>Documentation</h2>
-          <nav>
-            <ul>
-              <li><a href="#DocVariables">Variables</a></li>
-              <li><a href="#DocTypography">Typography</a></li>
-            </ul>
-          </nav>
-        </aside>
-
-        <main>
-          <section>
-            <header>
-              <h2 id="GridSystem">Grid System</h2>
-              <p>
-                Terminal CSS has no build-in grid system. However, you can roll
-                your own with Flexbox or CSS Grid.
-              </p>
-            </header>
-            <div class="image-grid">
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&1"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&2"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&3"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&4"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&5"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&6"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-              <a href="https://picsum.photos" style="border: none"
-                ><img
-                  src="https://picsum.photos/200/300?random&7"
-                  width="auto"
-                  height="auto"
-                  alt="random image"
-              /></a>
-            </div>
-          </section>
-          <hr />
-          <section>
-            <header><h2 id="Navigation">Navigation</h2></header>
-            <div class="terminal-nav">
-              <div class="terminal-logo">
-                <div class="logo terminal-prompt">
-                  <a href="#" class="no-style">Logo</a>
-                </div>
-              </div>
-              <nav class="terminal-menu">
-                <ul>
-                  <li><a class="menu-item" href="#">Item #1</a></li>
-                  <li>
-                    <a class="menu-item active" href="#">Active Item #2</a>
-                  </li>
-                  <li><a class="menu-item" href="#">Item #3</a></li>
-                </ul>
-              </nav>
-            </div>
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="NavigationList">Navigation Lists</h2></header>
-            <nav>
-              <ul>
-                <li><a href="#">Dashboard</a></li>
-                <li><a href="#">Members</a></li>
-                <li><a href="#">Settings</a></li>
-                <li>
-                  <a href="#">Profile</a>
-                  <ul>
-                    <li><a href="#">Account</a></li>
-                    <li><a href="#">Billing</a></li>
-                    <li><a href="#">Logout</a></li>
-                  </ul>
-                </li>
-              </ul>
-            </nav>
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Lists">Lists</h2></header>
-            <ul>
-              <li>This is a list item</li>
-              <li>So is this - there could be more</li>
-              <li>
-                Make sure to style list items to:
-                <ul>
-                  <li>Not forgetting child list items</li>
-                  <li>Not forgetting child list items</li>
-                  <li>Not forgetting child list items</li>
-                  <li>Not forgetting child list items</li>
-                </ul>
-              </li>
-              <li>A couple more</li>
-              <li>Top-level list items</li>
-            </ul>
-            <p>Don't forget <strong>Ordered lists</strong>:</p>
-            <ol>
-              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-              <li>
-                Aliquam tincidunt mauris eu risus
-                <ol>
-                  <li>
-                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                  </li>
-                  <li>Aliquam tincidunt mauris eu risus.</li>
-                </ol>
-              </li>
-              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-              <li>Aliquam tincidunt mauris eu risus.</li>
-            </ol>
-            <p><strong>Description lists </strong>are also included.</p>
-            <dl>
-              <dt>Description list title 01</dt>
-              <dd>Description list description 01</dd>
-              <dt>Description list title 02</dt>
-              <dd>Description list description 02</dd>
-              <dd>Description list description 03</dd>
-            </dl>
-            <p>
-              A <strong>Table of content</strong>, which can be used as an index
-              for a blog archive.
-            </p>
-            <p>
-              Unlike regular lists, the TOC component
-              <em>only supports a single depth level.</em>
-            </p>
-            <ol class="terminal-toc">
-              <li>
-                <a href="#"
-                  >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
-                >
-              </li>
-              <li>
-                <a href="#"
-                  >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
-                >
-              </li>
-              <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
-              <li>
-                <a href="#"
-                  >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
-                >
-              </li>
-              <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
-            </ol>
-          </section>
-
-          <hr />
-          <section>
-            <header>
-              <h2 id="Typography">Typography</h2>
-              <h1>Level 1 Heading</h1>
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et
-                malesuada fames ac turpis egestas. Vestibulum tortor quam,
-                feugiat vitae, ultricies eget, tempor sit amet, ante.
-              </p>
-              <h2>Level 2 Heading</h2>
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et
-                malesuada fames ac turpis egestas. Vestibulum tortor quam,
-                feugiat vitae, ultricies eget, tempor sit amet, ante.
-              </p>
-              <h3>Level 3 Heading</h3>
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et
-                malesuada fames ac turpis egestas. Vestibulum tortor quam,
-                feugiat vitae, ultricies eget, tempor sit amet, ante.
-              </p>
-              <h4>Level 4 Heading</h4>
-              <h5>Level 5 Heading</h5>
-              <h6>Level 6 Heading</h6>
-            </header>
-          </section>
-
-          <hr />
-          <section>
-            <header>
-              <h2 id="Tables">Tables</h2>
-            </header>
-            <table>
-              <caption>
-                Most Downloaded Movies on BitTorrent, 2011
-              </caption>
-              <thead>
-                <tr>
-                  <th>Rank</th>
-                  <th>Movie</th>
-                  <th>Downloads</th>
-                </tr>
-              </thead>
-              <tfoot>
-                <tr>
-                  <th colspan="4">torrentfreak.com</th>
-                </tr>
-              </tfoot>
-              <tbody>
-                <tr>
-                  <th>1</th>
-                  <td>Fast Five</td>
-                  <td>9,260,000</td>
-                </tr>
-                <tr>
-                  <th>2</th>
-                  <td>The Hangover II</td>
-                  <td>8,840,000</td>
-                </tr>
-                <tr>
-                  <th>3</th>
-                  <td>Thor</td>
-                  <td>8,330,000</td>
-                </tr>
-                <tr>
-                  <th>4</th>
-                  <td>Source Code</td>
-                  <td>7,910,000</td>
-                </tr>
-                <tr>
-                  <th>5</th>
-                  <td>I Am Number Four</td>
-                  <td>7,670,000</td>
-                </tr>
-                <tr>
-                  <th>6</th>
-                  <td>Sucker Punch</td>
-                  <td>7,200,000</td>
-                </tr>
-                <tr>
-                  <th>7</th>
-                  <td>127 Hours</td>
-                  <td>6,910,000</td>
-                </tr>
-                <tr>
-                  <th>8</th>
-                  <td>Rango</td>
-                  <td>6,480,000</td>
-                </tr>
-                <tr>
-                  <th>9</th>
-                  <td>The King’s Speech</td>
-                  <td>6,250,000</td>
-                </tr>
-                <tr>
-                  <th>10</th>
-                  <td>Harry Potter and the Deathly Hallows Part 2</td>
-                  <td>6,030,000</td>
-                </tr>
-              </tbody>
-            </table>
-          </section>
-          <hr />
-          <section>
-            <header><h2 id="SpecialElements">Special Elements</h2></header>
-            <p>Terminal CSS also supports a range of special elements.</p>
-
-            <h3 id="Blockquote">Blockquote</h3>
-            <blockquote>
-              <p>
-                <em>This is a properly formatted blockquote, btw.</em> Measuring
-                programming progress by lines of code is like measuring aircraft
-                building progress by weight.
-              </p>
-              <footer>
-                <cite
-                  ><a href="http://www.thegatesnotes.com">Bill Gates</a></cite
-                >
-              </footer>
-            </blockquote>
-            <h3 id="Misc">Misc</h3>
-            <h5 class="terminal-prompt">Terminal Prompt</h5>
-            <p>
-              I am <a href="?abc123">the a tag</a> example<br />
-              I am <abbr title="test">the abbr tag</abbr> example<br />
-              I am <b>the b tag</b> example<br />
-              I am <cite>the cite tag</cite> example<br />
-              I am <code>the code tag</code> example<br />
-              I am <del>the del tag</del> example<br />
-              I am <dfn>the dfn tag</dfn> example<br />
-              I am <em>the em tag</em> example<br />
-              I am <i>the i tag</i> example<br />
-              I am <ins>the ins tag</ins> example<br />
-              I am <kbd>the kbd tag</kbd> example<br />
-              I am <q>the q tag</q> example<br />
-              I am <samp>the samp tag</samp> example<br />
-              I am <small>the small tag</small> example<br />
-              I am <span>the span tag</span> example<br />
-              I am <strong>the strong tag</strong> example<br />
-              I am <sub>the sub tag</sub> example<br />
-              I am <sup>the sup tag</sup> example<br />
-              I am <var>the var tag</var> example<br />
-            </p>
-
-            <h4 id="Address">Address</h4>
-            <address>
-              Mozilla Foundation<br />
-              1981 Landings Drive<br />
-              Building K<br />
-              Mountain View, CA 94043-0801<br />
-              USA
-            </address>
-            <br />
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Forms">Forms</h2></header>
-            <form action="#">
-              <fieldset>
-                <legend>Form legend</legend>
-                <div class="form-group">
-                  <label for="email">Email input:</label>
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    required
-                    minlength="5"
-                    placeholder="test"
-                  />
-                </div>
-                <div class="form-group">
-                  <label for="text">Text input:</label>
-                  <input
-                    id="text"
-                    name="text"
-                    type="text"
-                    required
-                    minlength="5"
-                    placeholder="test"
-                  />
-                </div>
-                <div class="form-group">
-                  <label for="itext">Invalid input (min-length 10):</label>
-                  <input id="itext" name="itext" type="text" minlength="10" />
-                </div>
-                <div class="form-group">
-                  <label for="pw">Password input:</label>
-                  <input type="password" id="pw" name="pw" value="password" />
-                </div>
-                <div class="form-group">
-                  <label for="radio">Radio input:</label>
-                  <input name="radio" type="radio" id="radio" />
-                </div>
-                <div class="form-group">
-                  <label for="check">Checkbox input:</label>
-                  <input for="check" type="checkbox" id="check" />
-                </div>
-                <div class="form-group">
-                  <label for="select">Select field:</label>
-                  <select id="select" name="select">
-                    <option>Option 01</option>
-                    <option>Option 02</option>
-                  </select>
-                </div>
-                <div class="form-group">
-                  <label for="tarea">Textarea:</label>
-                  <textarea id="tarea" cols="30" rows="5" name=="tarea"/>
-                </div>
-                <div class="form-group">
-                  <label for="submit">Input Button:</label>
-                  <button
-                    class="btn btn-default"
-                    type="submit"
-                    role="button"
-                    name="submit"
-                    id="submit"
-                  >
-                    Submit
-                  </button>
-                </div>
-              </fieldset>
-            </form>
-          </section>
-          <hr />
-          <section>
-            <header><h2 id="Progress">Progress Bar</h2></header>
-            <br />
-            <p>With only an arrow</p>
-            <div class="progress-bar">
-              <div class="progress-bar-filled" style="width: 40%"></div>
-            </div>
-            <p>With a percentage showing above the arrow</p>
-            <div class="progress-bar progress-bar-show-percent">
-              <div
-                class="progress-bar-filled"
-                style="width: 30%"
-                data-filled="Loading 30%"
-              ></div>
-            </div>
-            <p>Without arrow</p>
-            <div class="progress-bar progress-bar-no-arrow">
-              <div
-                class="progress-bar-filled"
-                style="width: 60%"
-                data-filled="Loading 60%"
-              ></div>
-            </div>
-            <br />
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Buttons">Buttons</h2></header>
-            <button class="btn btn-default">Default</button><br /><br />
-            <button class="btn btn-primary">Primary</button><br /><br />
-            <button class="btn btn-error">Error</button><br /><br />
-            <button class="btn btn-default btn-ghost">Ghost Button</button
-            ><br /><br />
-            <button class="btn btn-primary btn-ghost">Ghost Button</button
-            ><br /><br />
-            <button class="btn btn-error btn-ghost">Ghost Button</button
-            ><br /><br />
-            <button class="btn btn-primary btn-block">Block Level Button</button
-            ><br /><br />
-            <p>Button Group</p>
-            <div class="btn-group">
-              <button class="btn btn-default btn-ghost">Left</button>
-              <button class="btn btn-default btn-ghost">Middle</button>
-              <button class="btn btn-default btn-ghost">Right</button>
-            </div>
-            <br />
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Cards">Cards</h2></header>
-            <div class="terminal-card">
-              <header>Card Title</header>
-              <div>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                Expedita, quas ex vero enim in doloribus officiis ullam vel nam
-                esse sapiente velit incidunt. Eaque quod et, aut maiores
-                excepturi sint.
-              </div>
-            </div>
-            <br />
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Timeline">Timeline</h2></header>
-            <div class="terminal-timeline">
-              <div class="terminal-card">
-                <header>Card Title</header>
-                <div>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                  Expedita, quas ex vero enim in doloribus officiis ullam vel
-                  nam esse sapiente velit incidunt. Eaque quod et, aut maiores
-                  excepturi sint.
-                </div>
-              </div>
-              <div class="terminal-card">
-                <header>Card Title</header>
-                <div>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                  Expedita, quas ex vero enim in doloribus officiis ullam vel
-                  nam esse sapiente velit incidunt. Eaque quod et, aut maiores
-                  excepturi sint.
-                </div>
-              </div>
-            </div>
-            <br />
-          </section>
-
-          <hr />
-          <section>
-            <header><h2 id="Alerts">Alerts</h2></header>
-            <div class="terminal-alert">Default message</div>
-            <div class="terminal-alert terminal-alert-primary">
-              Primary message
-            </div>
-            <div class="terminal-alert terminal-alert-error">Error message</div>
-          </section>
-          <hr />
-          <section>
-            <header><h2 id="Figure">Image with caption</h2></header>
-            <figure>
-              <img
-                src="https://picsum.photos/1000/600?random&imageWithCaption"
-                alt="Image with caption"
-                title="Image with caption"
-              />
-              <figcaption>Image with caption</figcaption>
-            </figure>
-          </section>
-
-          <hr />
-          <section>
-            <header>
-              <h2 id="highlightjs">Supports Highlight.js</h2>
-              <p>
-                Terminal CSS comes with a build in theme for
-                <a
-                  href="https://highlightjs.org/"
-                  target="_black"
-                  rel="noopener noreferrer"
-                  >Highlight.js</a
-                >
-              </p>
-            </header>
-            <pre>
-<code>
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: var(--block-background-color);
-  color: var(--font-color);
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: var(--secondary-color);
-}
-
-.hljs-variable {
-    color: var(--font-color);
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-built_in,
-.hljs-name,
-.hljs-tag {
-  color: var(--primary-color);
-}
-
-.hljs-string,
-.hljs-title,
-.hljs-section,
-.hljs-attribute,
-.hljs-literal,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-addition {
-  color: var(--secondary-color);
-}
-
-.hljs-string {
-    color: var(--secondary-color);
-}
-
-.hljs-deletion,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-meta {
-  color: var(--primary-color);
-}
-
-.hljs-doctag {
-  color: var(--secondary-color);
-}
-
-.hljs-attr {
-  color: var(--primary-color);
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link {
-  color: var(--primary-color);
-}
-
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-</code>
-</pre>
-          </section>
-
-          <hr />
-          <section>
-            <header><h2>Documentation</h2></header>
-            <p>
-              Most of the documentation is still at an early stage. For more
-              details, please have a look at the source of this website.
-            </p>
-            <section>
-              <header>
-                <h2 id="DocVariables">Variables</h2>
-              </header>
-              <p>
-                Customizing the style of Terminal CSS with CSS Variables is
-                easy.
-              </p>
-
-              <dl class="custom-dl">
-                <style>
-                  .custom-dl dt {
-                    font-weight: 600;
-                  }
-
-                  .custom-dl dd.italic {
-                    font-style: italic;
-                  }
-                </style>
-                <dt>--global-font-size</dt>
-                <dd>The Base font size</dd>
-                <dt>--global-line-height</dt>
-                <dd>
-                  The base line height. Modify this to achieve the best
-                  readability.
-                </dd>
-                <dt>--font-stack</dt>
-                <dd>The fonts for the website.</dd>
-                <dd>
-                  Use <code>@font-face</code> or any other font provider to
-                  include your custom fonts.
-                </dd>
-                <dt>--mono-font-stack</dt>
-                <dd>Same as above but for <code>code</code>.</dd>
-                <dt>--background-color</dt>
-                <dd>The page background color</dd>
-                <dt>--font-color</dt>
-                <dd>
-                  The base font color for text, headlines, blockquotes, lists,
-                  etc.
-                </dd>
-                <dt>--invert-font-color</dt>
-                <dd>
-                  Sometimes text appears on a colored background. Adjust this
-                  color to improve readability.
-                </dd>
-                <dt>--primary-color</dt>
-                <dd>The primary color is used for links and buttons.</dd>
-                <dt>--secondary-color</dt>
-                <dd>
-                  The secondary color is more subtle then the primary color.
-                  It's used for code highlighting and image captions.
-                </dd>
-                <dt>--error-color</dt>
-                <dd>Used for error alerts and form validation.</dd>
-                <dt>--progress-bar-background</dt>
-                <dd>The background color of progress bars.</dd>
-                <dt>--progress-bar-fill</dt>
-                <dd>
-                  The fill color, indicating the progress in progress bars.
-                </dd>
-                <dt>--code-bg-color</dt>
-                <dd>
-                  The background color of <code>&lt;code&gt;</code> elements.
-                </dd>
-                <dt>--input-style</dt>
-                <dd>
-                  The style of input element borders. Possible values are:
-                </dd>
-                <dd class="italic">
-                  none, solid, dotted, dashed, double, groove, ridge, inset,
-                  outset, hidden, inherit, initial, unset
-                </dd>
-                <dt>--display-h1-decoration</dt>
-                <dd>
-                  Show a double dash below <code>h1</code> elements. Possible
-                  values are:
-                </dd>
-                <dd class="italic">block, none</dd>
-              </dl>
-            </section>
-
-            <hr />
-            <section>
-              <header>
-                <h2 id="DocTypography">Typography</h2>
-              </header>
-              <p>
-                Terminal CSS uses a single font size for almost all elements.
-                However, there is a way to use browser default font sizes if you
-                wish.
-              </p>
-              <dl class="custom-dl">
-                <dt>Single font size</dt>
-                <dd>
-                  Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If
-                  you leave that option, it will fallback to browser defaults.
-                  See <a href="/sans-serif/">here</a>.
-                </dd>
-              </dl>
-            </section>
-          </section>
-          <hr />
-          <footer>
-            <p>
-              This project is inspired by
-              <a
-                href="https://egoist.sh/"
-                target="_blank"
-                rel="noopener noreferer"
-                >@egoist's</a
-              >
-              work -
-              <a href="https://github.com/egoist/hack" rel="noopener noreferer"
-                >hack.css</a
-              >
-            </p>
-          </footer>
-
-          <hr />
-          <section>
-            <header></header>
-            <p>Version: 0.7.2 <a href="#menu">Top</a></p>
-          </section>
-        </main>
-      </div>
-    </div>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
-    <script async defer src="https://buttons.github.io/buttons.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        document.querySelectorAll("pre code").forEach((block) => {
-          window.hljs.highlightBlock(block);
-        });
-      });
-    </script>
-  </body>
-</html>