JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="radio2">
<input type="checkbox" class="checkbox" name="a" id="checkbox" />
<label for="checkbox"><p class="gotham-pro-bold">Флажок</p></label>
<div class="col-11 offset-1"  style="margin-bottom: 20px;">
        <input type="radio" class="radio" id="radio" />
        <label for="radio"><p class="gotham-pro-normal">Кнопка</p></label>
    </div>
    <div class="col-11 offset-1">
        <input type="radio" class="radio" id="radio1" />
        <label for="radio1"><p class="gotham-pro-normal">Кнопка</p></label>
    </div>
</div>

CSS

.radio {
  position: absolute;
  z-index: -1;
  opacity: 1;
  margin: 30px 0 0 7px;
}
.radio + label {
  position: relative;
  padding: 0 0 0 35px;
  cursor: pointer;
}
.radio + label:before {
  content: url(img/radio.png);
  position: absolute;
  top: -3px;
  left: 0;
}
 
.radio:focus + label:before {
  content: "aaaaaaaaaaaaaaaaaa";
}

JavaScript

addEventListener('DOMContentLoaded', function() {
	document.querySelectorAll('.radio2').forEach(d => d.addEventListener('click', (e, {target} = e) =>
																																			 target.type == 'radio' && !d.querySelector('[type="checkbox"]').checked && e.preventDefault()
																																			))});