JSFiddle - React, Tailwind, and code Playground

HTML

<label class="bl_payment__label">
  <input class="" type="radio" name="payment" tabindex="0">
  <span class="bl_payment__text" tabindex="0">Оплата наличными</span>
</label>
<label class="bl_payment__label">
  <input class="" type="radio" name="payment" tabindex="0">
  <span class="bl_payment__text" tabindex="0">Банковский перевод</span>
</label>

SCSS

$color_yellow: #ffd608;

.bl_payment__label {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  &:focus{
    color: $color_yellow;
  }
}

 input{
    position: absolute;
    opacity:0.9;
 }


.bl_payment__text {
  color: inherit;
  font-size: 16px;
}
.bl_payment__text {
  margin-left: 25px;
  color: #505050;
  font-size: 18px;
  position: relative;
  display: block;
  width: 100%;

  &:hover {
    color: $color_yellow;
  }
  &:focus {
    outline: none;
    color: $color_yellow;
    text-decoration: underline;
  }
}
.bl_payment__text:before {
    content: "";
    position: absolute;
    left: -25px;
    top: 8px;
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 1px solid #505050;
  }

.bl_delivery__label input:checked + .bl_delivery__text,
.bl_payment__label input:checked + .bl_payment__text {
  font-weight: bold;
  color: $color_yellow;

  &:after {
    content: "";
    position: absolute;
    left: -22px;
    top: 10px;
    width: 5px;
    height: 5px;
    background-color: #ffc808;
    box-sizing: border-box;
    z-index: 2;
  }
}