JSFiddle - React, Tailwind, and code Playground

HTML

Colour:
<div class="list">
  <input type="radio" name="color" value="red" checked>
  <input type="radio" name="color" value="green">
  <input type="radio" name="color" value="blue">
  <button>‣</button>
</div>

CSS

/* General stuff - list. */
.list {
  display: inline-block;
}
/* Hide not-selected elements when list isn't open. */
.list:not(.open) input[type="radio"]:not(:checked) {
  display: none;
}
/* Add something to see what is selected while the list is open. */
.list.open input[type="radio"]:checked:before {
  border: 1px solid #111;
}
/* General stuff - button. */
.list button {
  height: 24px;
  padding: 0 2px;
}
/* General stuff - radio button. */
input[type="radio"] {
  position: relative;
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
/* 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);
}
/* Colors */
input[type="radio"][value="red"]:after {
  background: #c44;
}
input[type="radio"][value="green"]:after {
  background: #4c4;
}
input[type="radio"][value="blue"]:after {
  background: #44c;
}

JavaScript

document.querySelector(".list button").addEventListener("click", function() {event.srcElement.parentNode.classList.toggle("open")});