JSFiddle - React, Tailwind, and code Playground

HTML

<label>I want to create an account to:</label>
 <div class="rbtn-group">
  <a class="rbtn-link"> <input type="radio" name="reg_as" value="buy" /><span>purchase</span>  </a>
  <a class="rbtn-link left-right-brdr"> <input type="radio" name="reg_as" value="sell" /><span>sale</span> </a>
  <a class="rbtn-link"> <input type="radio" name="reg_as" value="both" checked /><span>buying and selling</span>  </a>
 </div>

CSS

label {
 display:block;
}
div.rbtn-group { 
/* width:315px; */
 display: inline-block;
 margin: 5px 0;
 border:1px solid #CCC; 
}
a.rbtn-link {  
 padding:10px 7px;
 font-size:14px;
 float:left; 
}
a.rbtn-link:hover {  
 cursor:pointer;
 background-color: #E8E8E8; 
 text-decoration:none;
 color:inherit;
}
a.rbtn-link input, a.rbtn-link span {  
  vertical-align: middle;
}

.left-right-brdr {
  border-left:1px solid #CCC;
  border-right:1px solid #CCC; 
}

JavaScript

$(document).ready(function(){
 $('.rbtn-link').click(function (e) {     // are expanding area with a click of a switch radio buttons marked.
   $(this).find('input').attr('checked', 'checked');   // set the attribute radio buttons marked
 });

});