JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
	<input type="radio" name="direction" id="direction0" value="left" />
	<label class="btn btn-default" for="direction0">left</label>
	<input type="radio" name="direction" id="direction1"  value="top" />
	<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
	<hr>
<form id="form2">	

<div style="padding:20px;display:inline" class="custom-radio">
	<input type="radio" name="direction" id="direction0"  value="left" />
	<label class="btn btn-default" for="direction0">left</label>
	<input type="radio" name="direction" id="direction1"  value="top" />
	<label class="btn btn-default" for="direction1">right</label>
</div>
</form>

CSS

.custom-radio label {
	color:#FFF;
	border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked + label {
  background-color: #114ABB;
}