JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" id="radio01" name="konnect" value="yes"><label for="radio01"><span></span>yes</label>
        <input type="radio" id="radio02" name="konnect" value="no"><label for="radio02"><span></span>no</label><br>

CSS

/* radio buttons */
		input[type=radio] {
			display: none;
		}
		input[type=radio] + label {
			cursor: pointer;
			float: left;
			padding: 5px 0;
			font-size: 18px;
			color: #ffffff;
			text-align: center;
			width: 50%;
			height: auto;
			margin-bottom: 10px;
			vertical-align: middle;
		}
		/* yes */
		#radio01 + label {
			background: rgb(46, 204, 113);
		}
		#radio01 + label:hover {
			background: rgba(46, 204, 113, 0.75);
		}
		#radio01:checked + label {
    		background: rgb(39, 174, 96);
		}
		#radio01:checked ~ label[for="radio02"] {
			background: rgba(26, 188, 156, 0.25);
		}
		/* no */
		#radio02 + label {
			background: rgb(26, 188, 156);
		}
		#radio02 + label:hover {
			background: rgba(26, 188, 156, 0.75);
		}
		#radio02:checked ~ label[for="radio01"] {
    		background: rgba(46, 204, 113, 0.25);
		}
		#radio02:checked + label {
			background: rgb(22, 160, 133);
		}