JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="radios" id="radioone" value="one"><label for="radioone">radio 1</label><input type="radio" name="radios" id="radiotwo" value="two" checked="checked"><label for="radiotwo">radio 2</label>

CSS

input[type=radio] {
    display:none;
}
 
input[type=radio] + label {
	cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.5em 2em 0.5em 2em;
    background-color: #eeeeee;
    color: #bbbbbb;
}

input[type=radio] + label:first-child  {
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
	-webkit-border-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-o-border-top-left-radius: 7px;
	-o-border-bottom-left-radius: 7px;
	-moz-border-top-left-radius: 7px;
	-moz-border-bottom-left-radius: 7px;
}

input[type=radio]:checked + label { 
	background-color: green;
	color: white;
}

input[type=radio]:checked + label:before {
    content: "âś“ ";
}