JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<ul class="items">
  <li>
    <input type="checkbox" id="work" />Work items</li>
  <li>
    <input type="checkbox" id="shopping" />Shopping</li>
  <li>
    <input type="checkbox" id="financial" />Financial Information & Tips</li>
  <li>
    <input type="checkbox" id="work" />Work items</li>
  <li>
    <input type="checkbox" id="shopping" />Shopping</li>
  <li>
    <input type="checkbox" id="financial" />Financial Information & Tips & stuff and more stuff</li>
  <li>
    <input type="checkbox" id="work" />Work items</li>
  <li>
    <input type="checkbox" id="shopping" />Shop</li>
  <li>
    <input type="checkbox" id="financial" />Financial</li>
  <li>
    <input type="checkbox" id="work" />Work items</li>
  <li>
    <input type="checkbox" id="shopping" />Shopping</li>
  <li>
    <input type="checkbox" id="financial" />Financial Information & Tips</li>
</ul>

CSS

ul.items {
  text-align: center;
  list-style-type: none;
}
ul.items li {
  float:left;
}
ul.items li:nth-child(3n+4) {
  clear:left;
  float:left;
}