JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked", style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

SCSS

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;

  &:last-of-type {
    border-bottom: 0;
  }
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;
  
    &:before {
    position: absolute;
    display: block;
    width: 18px;
    height: 22px;
    top: -2px;
    left: 0px;
    padding-left: 2px;
    background-color: transparent;
    transition: background-color .3s ease;
    content: '\2713';
    font-family: initial;
    font-size: 19px;
    color: white;
  }
}

// Checked state
input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;

  &:before {
    background-color: #5bc0de;
  }
}