JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
Stackoverflow Answer by arttronics for SO Question: http://stackoverflow.com/q/13778963/1195891
-->
<p class="text">Smallest</p>
<div class="smallest">
  <ul>
    <li>
      <input type="checkbox" id="c1" class="checkBox" />a</li>
    <li>
      <input type="checkbox" id="c2" class="checkBox" />b</li>
    <li>
      <input type="checkbox" id="c3" class="checkBox" />c</li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" id="c4" class="checkBox" />d</li>
    <li>
      <input type="checkbox" id="c5" class="checkBox" />e</li>
    <li>
      <input type="checkbox" id="c6" class="checkBox" />f</li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" id="c7" class="checkBox" />g</li>
    <li>
      <input type="checkbox" id="c8" class="checkBox" />h</li>
    <li>
      <input type="checkbox" id="c9" class="checkBox" />i</li>
  </ul>
</div>

<div class="clear"></div>

<p class="text">Small</p>
<div class="small">
  <ul>
    <li>
      <input type="checkbox" id="c1" class="checkBox" />a</li>
    <li>
      <input type="checkbox" id="c2" class="checkBox" />b</li>
    <li>
      <input type="checkbox" id="c3" class="checkBox" />c</li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" id="c4" class="checkBox" />d</li>
    <li>
      <input type="checkbox" id="c5" class="checkBox" />e</li>
    <li>
      <input type="checkbox" id="c6" class="checkBox" />f</li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" id="c7" class="checkBox" />g</li>
    <li>
      <input type="checkbox" id="c8" class="checkBox" />h</li>
    <li>
      <input type="checkbox" id="c9" class="checkBox" />i</li>
  </ul>
</div>

<div class="clear"></div>

<p class="text">Normal</p>
<div class="normal">
  <ul>
    <li>
      <input type="checkbox" id="c1" class="checkBox" />a</li>
    <li>
      <input type="checkbox" id="c2" class="checkBox" />b</li>
    <li>
      <input type="checkbox" id="c3" class="checkBox" />c</li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" id="c4"...

CSS

body {
  margin: 20px;
}

.clear {
  clear: both;
  padding-bottom: 20px;
}

.text{
  font-size: 20px;
  text-shadow: 1px 1px 1px #00ff00, 0px 0px 0px #000000;
}

ul {
  float:left;
  margin:0px;
  list-style:none;
  padding:0px;
}

.smallest ul {
  -moz-transform: scale(0.50);
  -webkit-transform: scale(0.50);
  -o-transform: scale(0.50);
  transform: scale(0.50);
}

.small ul {
  -moz-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -o-transform: scale(0.75);
  transform: scale(0.75);
}

.normal ul {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.large ul {
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
  padding: 5px;
}

.extraLarge ul {
  -moz-transform: scale(1.50);
  -webkit-transform: scale(1.50);
  -o-transform: scale(1.50);
  transform: scale(1.50);
  padding: 10px;
}


/* Add   li   to all above 'size' CSS Selectors for different layout. Example: .extraLarge ul li {     */