JSFiddle - React, Tailwind, and code Playground

by jslayer

HTML

<h4>Пол</h4>
  <div class="form-item male">
    <label class="option">
        <input type="radio" name="tit1" value="1" class="form-radio"><span>M</span>
    </label>
  </div>
  <div class="form-item female">
    <label class="option">
        <input type="radio" name="tit1" value="2" class="form-radio"><span>Ж</span>
    </label>
  </div>

CSS

.male span, .female span {
    background-image: url('//bgoperator.ru/img/sprite-sfaa55b893e.png');
    background-repeat: no-repeat;
    height: 26px;
    width: 30px;
    text-indent: -9999px;
    display: inline-block;
    cursor: pointer;
}

.male input, .female input {
    display: none;
}

.male span {
    background-position: 0 -1943px;
}

.male :checked + span {
    background-position: 0 -1692px;
}

.female span {
    background-position: 0 -1733px;
}

.female :checked + span {
    background-position: 0 -1502px;
}