JSFiddle - React, Tailwind, and code Playground

HTML

<div id="service_type" class="align-center">
		
		  		<input type="radio" name="service_type" id="service_type_1" value="Option 1">
	  		    <input type="radio" name="service_type" id="service_type_2" value="Option 2"> 

	 		</div>

SCSS

#service_type .container {
    margin: 10px;
}

#service_type label {
    padding: 6px 12px;
    color: #fff;
}

#service_type input {
    -webkit-appearance:none;
    height:50px;
    width:150px;
    padding:10px;
    color:white;
    margin:5px;
    font-size: 18px;
    text-align: center;

}

#service_type input:hover {
  font-weight: bold;
}

#service_type input#service_type_1 {
  background:#336600;

}

#service_type input#service_type_2 {
  background:#0066ff;
}


#service_type input#service_type_1:before, input#service_type_1::before {
   content:"Option 1";
}

#service_type input:before, input::before {
    line-height:30px;
    width:100%;
    text-align:center;    
}

#service_type input#service_type_2:before, input#service_type_2::before {
   content:"Option 2";
}

#service_type .selected {
    background-color: #000;
}