JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio-toolbar-one">
   
    <input type="radio" id="radio1" name="radios-one" value="all" checked>
    <label for="radio1"></label>

    <input type="radio" id="radio2" name="radios-one"value="false">
    <label for="radio2"></label>

    <input type="radio" id="radio3" name="radios-one" value="true">
    <label for="radio3"></label> 

</div>

<div class="radio-toolbar-two">
   
    <input type="radio" id="radio4" name="radios-two" value="all" checked>
    <label for="radio4">16 ГБ</label>

    <input type="radio" id="radio5" name="radios-two"value="false">
    <label for="radio5">32 ГБ</label>

    <input type="radio" id="radio6" name="radios-two" value="true">
    <label for="radio6">64 ГБ</label>
    
    <input type="radio" id="radio7" name="radios-two" value="true">
    <label for="radio7">128 ГБ</label> 

</div>

CSS

.radio-toolbar-one input[type="radio"] {
    display:none; 
}

.radio-toolbar-one label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
    border-radius: 50%;
    height: 60px;
    width: 50px;
    border: 3px solid #f3f5f6;
    box-shadow: inset 2px 2px 10px #888888;
}

.radio-toolbar-one input[type="radio"]:checked + label { 
    background-color:#bbb;
    border: 3px solid #60adf0;
}

.radio-toolbar-two input[type="radio"] {
    display:none; 
}

.radio-toolbar-two label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
    border-radius: 10px;
    height: 60px;
    width: 90px;
    border: 3px solid #f3f5f6;
    font-size: 25px;
    margin-top: 15px;
}

.radio-toolbar-two input[type="radio"]:checked + label { 
    background-color:#bbb;
    border: 3px solid #60adf0;
}