JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-check">
              <span class="custom-checkbox-container mr-2">
                  <input type="checkbox" id="first_checkbox">
                <label for="first_checkbox">Checkbox</label>
              </span>
            </div> <!-- /.form-check -->

SCSS

.form-check {      margin-bottom: 0;
margin-top: 3px;
.custom-checkbox-container {
  input[type="checkbox"] {
    display: none;
    & + label {
      position: relative;
              font-family: 'Open Sans', sans-serif;
              letter-spacing: 0.5px;
              font-size: 10px;
              color: blue;
              text-transform: uppercase;
              font-weight: 700;
            }
            & + label:before {
              content: " ";
              box-sizing: border-box;
              display: inline-block;
              vertical-align: middle;
              width: 20px;
              height: 20px;
              margin-right: 8px;
              border: 2px solid blue;
            }
            & + label:after {
              content: " ";
              opacity: 0;
              position: absolute;
              width: 12px;
              height: 7px;
              top: 4px;
              left: 4px;
              background: transparent;
              border: 2px solid #787878;
              border-top: none;
              border-right: none;
              transform: rotate(-45deg);
              transition: opacity .3s;
            }
            &:checked + label:after {
              opacity: 1;
            }
          }
        }
      }