JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
 ...

CSS

body
{
    padding: 100px;
}
div
{
    display: inline;
    color: transparent;
    margin: 70px;
    cursor: pointer;
}
input
{
    display: block;
    float: left;
    height: 50px;
    width: 50px;
    background: #777;
    border: 3px solid #fff;
    position: relative;
    -webkit-transition: background .2s ease;
}
div:hover input
{
    background: #aaa;
}
div input:hover
{
    background: #777;
}
input[type="checkbox"]
{
    -webkit-appearance: none;
    cursor: pointer;
}
input[type="checkbox"]:checked
{
    background: #000;
    -webkit-transition: none;
}

input[type="checkbox"]:nth-of-type(3n+1):checked { background: #f00; }
input[type="checkbox"]:nth-of-type(5n+3):checked { background: #0f0; }
input[type="checkbox"]:nth-of-type(6n+4):checked { background: #00f; }
input[type="checkbox"]:nth-of-type(3n+5):checked { background: #ff0; }
input[type="checkbox"]:nth-of-type(4n+6):checked { background: #f0f; }
input[type="checkbox"]:nth-of-type(5n+7):checked { background: #0ff; }

input[type="checkbox"]:active
{
    background: #000 !important;
}