JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans:300"></script>
<div class="checkbox">
  <input type="checkbox" id="checked" checked>
  <label for="checked">Checkbox</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="unchecked">
  <label for="unchecked">Checkbox</label>
</div>

CSS

.checkbox {
  border: #ccc 1px solid;
  font: 300 1em 'Open Sans', sans-serif;
  margin: 1em 0;
  padding: 1em;
}

.checkbox label {
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
}

.checkbox input[type="checkbox"] + label::before {
  content: "\f404";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74c3c;
  font-family: "Ionicons";
  color: #fff;
  display: inline-block;
  line-height: 20px;
  text-align: center;
  margin-right: .5em;
}

.checkbox input[type="checkbox"]:checked + label::before {
  content: "\f3fd";
  background-color: #2ecc71;
}

.checkbox input[type="checkbox"] {
  display: none;
}