JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<div class="container">

<div class="col-lg-12 col-md-12 col-sm-12">
<h1>Basic Template</h1>
<p>Start with the below to begin working with a minimal Kathamo document.</p>
<pre class="pre-scrollable">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;title&gt;&lt;/title&gt;

&lt;!-- Kathamo --&gt;
&lt;link href="kathamo/kathamo.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;&lt;/body&gt;

&lt;/html&gt;
</pre>
</div>

</div>
</section>


<section>
<div class="container">

<div class="col-lg-12 col-md-12 col-sm-12">
<h1>Grid System</h1>
<p>Kathamo includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.</p>
</div>

<div class="col-lg-1 col-md-1 col-sm-1">
<div class="grid"><div class="size">1</div></div>
</div>
<div class="col-lg-11 col-md-11 col-sm-11">
<div class="grid"><div class="size">11</div></div>
</div>

<div class="col-lg-2 col-md-2 col-sm-2">
<div class="grid"><div class="size">2</div></div>
</div>
<div class="col-lg-10 col-md-10 col-sm-10">
<div class="grid"><div class="size">10</div></div>
</div>

<div class="col-lg-3 col-md-3 col-sm-3">
<div class="grid"><div class="size">3</div></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="grid"><div class="size">9</div></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="grid"><div class="size">4</div></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="grid"><div class="size">8</div></div>
</div>

<div class="col-lg-5 col-md-5 col-sm-5">
<div class="grid"><div class="size">5</div></div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7">
<div class="grid"><div class="size">7</div></div>
</div>

<div class="col-lg-6 col-md-6 col-sm-6">
<div class="grid"><div class="size">6</div></div>
</div>
<div...

CSS

/*!
 * Kathamo v3.0.0 (http://kathamo.github.com)
 * Copyright 2014-2015 Debashis Barman (http://www.debashisbarman.in)
 * Licensed under MIT (https://github.com/kathamo/Kathamo/blob/master/LICENSE)
 */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -moz-box-sizing: content-box;
       box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing:...