JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<label class="couleursProduits">
		<input type="radio" name="couleur" value="v1">
		<img width="25%" src="https://picsum.photos/id/100/367/">
</label>
<label class="couleursProduits">
		<input type="radio" name="couleur" value="v2">
		<img width="25%" src="https://picsum.photos/id/101/367/">
</label>
<label class="couleursProduits">
		<input type="radio" name="couleur" value="v3">
		<img width="25%" src="https://picsum.photos/id/102/367/">
</label>
<label class="couleursProduits">
		<input type="radio" name="couleur" value="v4">
		<img width="25%" src="https://picsum.photos/id/103/367/">
</label>

CSS

/* HIDE RADIO */
.couleursProduits input[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* IMAGE STYLES */
.couleursProduits input[type=radio] + img {
	cursor: pointer;
	float: left;
	outline: 1px solid #d0cdcd;
	outline-offset: -2px;
}
/* CHECKED STYLES */
.couleursProduits input[type=radio]:checked + img {
	outline: 2px solid red;
	outline-offset: -2px;
}
.couleursProduits input[type=radio]:checked + img:after {
  content:"\f1e3";
  font-family:"FontAwesome";
  position:absolute;
  top:0px;
  left:20px;
  font-size:13px;
  color:red;
}