JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<label id="exactMatchLabel">
  <input type='checkbox'>
  <span class="check"></span>
  <span class="label">Checkbox label text</span>
</label>

CSS

#exactMatchLabel {
  display: flex;
  align-items: center;
}

#exactMatchLabel input {
  display: none;
}

#exactMatchLabel span.check {
  height: 30px;
  width: 30px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

#exactMatchLabel [type=checkbox]:checked+span.check:before {
  content: '\00d7';
  position: absolute;
  top: -14px;
  left: 2px;
  font-size: 45px;
}

#exactMatchLabel span.label {
  margin-left: 0.5em;
}