JSFiddle - React, Tailwind, and code Playground

by Ankhena

HTML

<p>
  <input type="checkbox" id="input1">
<label for="input1" tabindex="0">Lorem ipsum dolor.</label>
</p>
<p>
  <input type="checkbox" id="input2">
<label for="input2" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, autem, excepturi? Magnam a, exercitationem dolor rem repellendus placeat hic, aspernatur earum rerum vero sit dolorem. Dolores iure maiores, repellat nesciunt, pariatur dolore distinctio illum amet ex nostrum velit reiciendis at.</label>
</p>

CSS

* {
  box-sizing: border-box
}

input {
    display: none;
}

input + label::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background: #f00;
}
input:checked + label::before {
  background: #0f0;
}
inpyt:focus + label, label:focus {
  background: #999;
}