JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<div id="tripTypeGroup">
  <div>
    <img src="https://i.imgur.com/piBvxJT.png">
    <label class="blue"><input type="radio" name="toggle"><span>One-Trip</span></label>
  </div>

  <div>
    <img src="https://i.imgur.com/jetuocT.png">
    <label class="green"><input type="radio" name="toggle"><span>Cruise</span></label>
  </div>

  <div>
    <img src="https://i.imgur.com/cA9bWIc.png">
    <label class="yellow"><input type="radio" name="toggle"><span>Annual-Multi Trip</span></label>

  </div>
  <div>
    <img src="https://i.imgur.com/uxZ1yWX.png">
    <label class="pink"><input type="radio" name="toggle"><span>Backpackers</span></label>

  </div>
</div>

CSS

body {
  background-color: rgba(2, 52, 53, .9);
}

#tripTypeGroup {
  margin: 4px;
  padding-left : 25%;
  display: grid;
  grid-template-columns: repeat(4, auto);
}

#tripTypeGroup > img {
  margin: auto;
  margin-bottom: 10px;

  display: table-row;
}

#tripTypeGroup div {
  padding: 4px;
  padding-left : 0px;
}
#tripTypeGroup label {
  float: left;
  width: 160px;
  height: 40px;
  background-color: white;
  border-radius: 4px;
  display: table-row;
}
#tripTypeGroup label span {
  text-align: center;
  font-size: 12px;
  padding: 13px 0px;
  display: block;
}
#tripTypeGroup label input {
  position: absolute;
  top: -20px;
}
#tripTypeGroup input:checked+span {
  background-color: #60ce93;
  color: white;
  border-radius: 4px;
}
@media screen and (max-width: 767px) {
  #tripTypeGroup {
    grid-template-columns: repeat(2, auto);
  }
}

JavaScript

jQuery("head").append("<style>\
#tripTypeGroup img {\
  border-radius: 50%;\
  margin: auto;\
  margin-bottom: 10px;\
  background-color: white;\
  width: 75px;\
  height: 75px;\
  display: table-row;\
}\
#tripTypeGroup {\
  margin: 4px;\
  float: left;\
  display: grid;\
  grid-template-columns: repeat(4, auto);\
}\
#tripTypeGroup div {\
  padding: 4px;\
  padding-left : 0px;\
}\
#tripTypeGroup label {\
  float: left;\
  width: 160px;\
  height: 40px;\
  background-color: white;\
  border-radius: 4px;\
  display: table-row;\
}\
#tripTypeGroup label span {\
  text-align: center;\
  color : black;\
  font-size: 12px;\
  padding: 13px 0px;\
  display: block;\
}\
#tripTypeGroup label input {\
  position: absolute;\
  top: -2000px;\
}\
#tripTypeGroup input:checked+span {\
  background-color: #60ce93;\
  color: white;\
  border-radius: 4px;\
}\
@media screen and (max-width: 767px) {\
  #tripTypeGroup {\
    grid-template-columns: repeat(2, auto);\
  }\
}\
	</style>");

jQuery('#s2id_datocad1').remove();
jQuery("#tripType").append('<div id="tripTypeGroup"><div><img src="https://i.stack.imgur.com/lzzbd.png"><label class="blue"><input type="radio" name="toggle"><span>One-Trip</span></label></div><div><img src="https://i.stack.imgur.com/Zfwks.png"><label class="green"><input type="radio" name="toggle"><span>Cruise</span></label></div><div><img src="https://i.stack.imgur.com/P6WSu.png"><label class="yellow"><input type="radio" name="toggle"><span>Annual-Multi Trip</span></label></div><div><img src="https://i.stack.imgur.com/iDiIl.png"><label class="pink"><input type="radio" name="toggle"><span>Backpackers</span></label></div></div>');