JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" class="radio" name="radio" id="radio-1">
<label for="radio-1">Option One</label>
<br>
<br>
<br>
<br>
<br>
<input type="radio" class="radio" name="radio" id="radio-2">
<label for="radio-2">Option Two</label>
<br>

CSS

/* visually hide the default radio button */

.radio {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


/* make the label relative, add padding to the left for adding the custom radio button */

.radio + label {
  padding-left: 25px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  line-height: 24px;
  margin: 8px 0;
  color: transparent;
}


/**
 * :before will be our new button!
 */

.radio + label:before {
  text-indent: 9999px;
  content: " ";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition(background 250ms ease-in-out);
  -moz-transition(background 250ms ease-in-out);
  -o-transition(background 250ms ease-in-out);
  transition(background 250ms ease-in-out);
  /* Your size */
  width: 200px;
  height: 100px;
  /* This should be: 0 - (height / 2) */
  margin-top: -5px;
  /* Your default background color */
  /* background: #f97e76;*/
  background: url(https://www.boutiquestella.fr/themes/stellaTheme/build/img/payment/mandats-administratifs-200x100.svg) no-repeat;
  border: 1px solid red;
}

.radio:checked + label:before {
  border: 1px solid green;
  /* Your checked background color */
  background: url(https://www.boutiquestella.fr/themes/stellaTheme/build/img/payment/mandats-administratifs-200x100.svg) no-repeat;
}