JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li class="li">
    	<input type="radio" name="color" value="red" class="li__radio">
    	<div class="li__btn li__btn--red"></div>
    </li>
    <li class="li">
    	<input type="radio" name="color" value="blue" class="li__radio">
    	<div class="li__btn li__btn--blue"></div>
    </li>
    <li class="li">
    	<input type="radio" name="color" value="green" class="li__radio">
    	<div class="li__btn li__btn--green"></div>
    </li>
    <li class="li">
    	<input type="radio" name="color" value="yellow" class="li__radio">
    	<div class="li__btn li__btn--yellow"></div>
    </li>
    <li class="li">
    	<input type="radio" name="color" value="white" class="li__radio">
    	<div class="li__btn li__btn--white"></div>
    </li>
    <li class="li">
    	<input type="radio" name="color" value="black" class="li__radio">
    	<div class="li__btn li__btn--black"></div>
    </li>
</ul>

CSS

.li {
    float: left;
    width: 40px;
    height: 40px;
    margin: 10px;
    position: relative;
}
.li__btn {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
}
.li__btn--red {
    background-color: red;
}
.li__btn--blue {
    background-color: blue;
}
.li__btn--green {
    background-color: green;
}
.li__btn--yellow {
    background-color: yellow;
}
.li__btn--white {
    background-color: white;
}
.li__btn--black {
    background-color: black;
}
.li__radio {
    opacity: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}
.li__radio:checked ~ .li__btn {
    border-color: purple;
}
.li__radio:checked ~ .li__btn--white {
    border-color: #aaa;
}