JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bothSidesSelect" class="radio bothSidesSelect">
    <input id="oneSide" type="radio" name="bothSides" value="1" checked="checked"/>
    <label for="oneSide">В одну сторону</label>
    <input id="twoSides" type="radio" name="bothSides" value="2"/>
    <label for="twoSides">Туда и обратно</label>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
}

body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

.bothSidesSelect
{
    display: block;
    margin-top: 2.4em;
    padding-left: 3em;
}


.radio label
{
    display: inline-block;
    color: rgba(63, 86, 102, 1);
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 30px;
    font-size: 1.2em;
    font-weight: bold;
}

.radio input[type=radio],
.radio input[type=checkbox]
{
    display: none;
}

.radio label:before
{
    content: "";
    display: inline-block;

    width: 17px;
    height: 17px;

    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: -2px;
    background-color: rgba(63, 86, 102, 0.45);
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, .7), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

.radio label:before {
    border-radius: 8px;
}



.radio input[type=radio]:checked + label:before
{
    content: "\25cf";
    color: rgb(255, 98, 70);
    font-size: 18px;
    text-align: center;
    line-height: 16px;
}