JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d">
<select id="pa_available-colors">
  <option value="" selected="selected">Choose an option</option>
  <option value="black" class="attached enabled">Black</option>
  <option value="green" class="attached enabled">White</option>
  <option value="red" class="attached enabled">Red</option>
</select>
</div>
<div id="r">
</div>

CSS

/* We don't want dropdown list, you can delete it with javascript, too! */
#d {
  display: none;
}
/* General stuff - radio button. */
input[type="radio"] {
  position: relative;
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
input[type="radio"]:checked:before {
  border: 1px solid #111;
}
/* The "background" - white background with gray border. */
input[type="radio"]:before {
  position: absolute;
  top: -2px;
  left: -2px;
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #fff;
}
/* The "foreground" - color "square". */
input[type="radio"]:after {
  position: absolute;
  top: 1px;
  left: 1px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.12);
}
/* Colours */
input[type="radio"][value=""]:after {
  background: #eee;
}
input[type="radio"][value="black"]:after {
  background: #111;
}
input[type="radio"][value="green"]:after {
  background: #4c4;
}
input[type="radio"][value="red"]:after {
  background: #c44;
}

JavaScript

$("#d option").each(function(i, e) { // get the options
    $("<input type='radio' name='r' />") // create a radio element
        .attr("value", $(this).val()) // set the value
        .attr("checked", i == 0) // check the first by default
        .click(function () { // add event click which updates the dropdown
            $("#d").val($(this).val()); // update the dropdown if clicked
        })
        .appendTo("#r"); // append to some visible place
});