JSFiddle - React, Tailwind, and code Playground
HTML
<select name="text">
<option>Yes</option>
<option>No</option>
<option>maybe</option>
</select>
CSS
div.btn {
display: inline-block;
border: 2px solid #ccc;
margin-right: 5px;
padding: 2px 5px;
cursor: pointer;
}
div.btn.on {
background-color: #777;
color: white;
}
JavaScript
/*var buttons = "";
$("select option").each(function () {
buttons += "<input type='button' value='" + this.value + "'/>";
});
$("select").replaceWith(buttons);
*/
$("select option").unwrap().each(function() {
var btn = $('<div class="btn">'+$(this).text()+'</div>');
if($(this).is(':checked')) btn.addClass('');
$(this).replaceWith(btn);
});
$(document).on('click', '.btn', function() {
$('.btn').removeClass('on');
$(this).addClass('on');
});