JSFiddle - React, Tailwind, and code Playground

HTML

<div id="admin_status">
        <label class="checkbox-inline" id="statusOpen">
          <input type="checkbox" id="status" value="open">
              <div class="label-text"><span>Active</span></div>
        </label>
 
      </div>

CSS

#admin_status label {
  width: 80px;
  display: inline-block;
  margin-right:15px;
}

#admin_status label input[type="checkbox"] {
  display:none;  
}

#admin_status label input[type="checkbox"] + .label-text:before {
  content: url("../images/04_checkbox_radiobutton.png");
  font-family: 'Roboto', sans-serif;
  speak: none;
  font-style: noraml;
  font-size: normal;
  font-variant: normal;
  font-transform: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
}

#admin_status label input[type="checkbox"]:checked + .label-text:before {
  content: url("../images/04_checkbox_radiobutton_checked.png"); 
}

#admin_status .checkbox-inline {
  width:100px;
  padding-left:0px;

}

.label-text {
    
}

#admin_status .checkbox-inline span {
  margin-left:20px;
  font-size: 1em;
    position:relative;
    bottom: 5px;
}