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 > .label-text {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; 
}

.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;  
}

/* Checkbox */
.form-label > input[type="checkbox"] + .label-text:before { content: "\f096"; }
.form-label > input[type="checkbox"]:checked + .label-text:before {
  content: "\f14a";
  color: blue;
  -webkit-animation: tick .2s ease-in-out;
          animation: tick .2s ease-in-out;
}

/* Radio */
.form-label > input[type="radio"] + .label-text:before { content: "\f10c"; }
.form-label > input[type="radio"]:checked + .label-text:before {
  content: "\f192";
  color: blue;
  -webkit-animation: tick .2s ease-in-out;
          animation: tick .2s ease-in-out;
}

/* Keyframes */
@-webkit-keyframes tick {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  90% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes tick {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  90% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}