JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox">
  <div class="tag">Confidencial</div>
  <input type="checkbox" class="input-assumpte" id="input-confidencial">
  <label for="input-confidencial"></label>
</div>

CSS

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  display: inline-block;
  position: relative;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
  color: #595959;
  content: '\2714';
  font-size: 10px;
  left: 0px;
  padding: 2px 8px 2px 2px;
  position: absolute;
  top: 0px;
}