JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stelling" id="stelling1">
	<ul class="vraaggroep">
		<li><label for="1Alleenstaand"><input type="radio" id="1Alleenstaand" name="vraag1" value="1Alleenstaand" />Alleenstaand</label></li>
		<li><label for="1Samenwonend"><input type="radio" id="1Samenwonend" name="vraag1" value="1Samenwonend" />Samenwonend</label></li>
		<li><label for="1Gezin met kinderen"><input type="radio" id="1Gezin met kinderen" name="vraag1" value="1Gezin met kinderen" />Gezin met kinderen</label></li>
	</ul>
	</div>

CSS

.vraaggroep {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
	 letter-spacing: 0px;
    font-family: arial;
}

.vraaggroep li {
     float:left;
     margin:0 5px 0 0;
	width: 150px;
	
	border-radius: 8px;
    position:relative;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #92C245), color-stop(1, #5d8121));
	background-image: -o-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
	background-image: -moz-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
	background-image: -webkit-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
	background-image: -ms-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
	background-image: linear-gradient(to bottom, #92C245 0%, #5d8121 100%);
	
	vertical-align: middle;
	display: table-cell;
	min-height:  50px;
}

.vraaggroep .selected {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fa0d52), color-stop(1, #d4022c));
	background-image: -o-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
	background-image: -moz-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
	background-image: -webkit-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
	background-image: -ms-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
	background-image: linear-gradient(to bottom, #fa0d52 0%, #d4022c 100%);
}

.vraaggroep input[type="radio"] {
    opacity:0.011;
    z-index:100;
	position: absolute;
	left: 0px;
}

.vraaggroep input[type="radio"]:checked + label {
    background:yellow;
}

.vraaggroep label {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
     padding:10px 5px 5px 5px;
     cursor:pointer;
    z-index:90;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	width: 140px;
	min-height: 34px;
	margin: auto;
	line-height: 18px;
}

.vraaggroep label:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fa0d52), color-stop(1, #d4022c));
	background-image:...