JSFiddle - React, Tailwind, and code Playground

by blog Canonium

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- Checkboxes -->
<label class="form-label">
  <input type="checkbox">
  <span class="label-text">Checkbox #1</span>
</label>
    
<!-- Radio -->
<label class="form-label">
  <input type="radio">
  <span class="label-text">Radio #1</span>
</label>

CSS

.form-label {
  cursor: pointer;
  color: #333;
}

.form-label > input[type="checkbox"],
.form-label > input[type="radio"] {
  display: none;
}

.form-label > input[type="checkbox"] + .label-text:before,
.form-label > input[type="radio"] + .label-text:before {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  width: 1em;
  display: inline-block;
  margin-right: 5px;  
}

.form-label > input[type="checkbox"] + .label-text:before {
  content: "\f096";
}

.form-label > input[type="radio"] + .label-text:before {
  content: "\f10c";
}