JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<h1>Custom Checkboxes</h1>
<div>
  <table>
    <tr>
      <td>
          <input id="box1" type="checkbox" />
          <label for="box1"></label>
          <span>label 1</span>
      </td>
      <td>Lorem ipsum dolor.</td>
      <td>Lorem ipsum dolor sit amet.</td>
    </tr>
    <tr>
      <td>
          <input id="box2" type="checkbox" />
          <label for="box2"></label>
          <span>label 2</span>
      </td>
      <td>Lorem ipsum dolor.</td>
      <td>Lorem ipsum dolor sit amet.</td>
    </tr>
    <tr>
      <td>
          <input id="box3" type="checkbox" />
          <label for="box3"></label>
          <span>label 3</span>
      </td>
      <td>Lorem ipsum dolor.</td>
      <td>Lorem ipsum dolor sit amet.</td>
    </tr>
  </table>
</div>

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/


/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}
input[type=checkbox] + label{
    font-size: 25px;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
    vertical-align: middle;
}
input[type=checkbox] + label:hover {
   color: red;
   cursor: pointer;
}
input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 0; font-size: 24px } /* space between checkbox and label */

input[type=checkbox]:checked + label{
    font-size: 24px;
    text-align: center;
    color: red;
}

input[type=checkbox]:checked + label:before { content: "\f14a"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 0;font-size: 22px } /* allow space for check mark */

td span {
  vertical-align: midle;
}