JSFiddle - React, Tailwind, and code Playground

HTML

<div class='survey-name'>
  First name: <input type='text' id='firstname' name='FirstName' /><br />
  Last name: <input type='text' name='LastName' /><br />

</div>

<div class='survey-question-1'>
  <p>Are you a Front-End or Back-End Developer?</p>
  <input type='radio' name='developer' value='Front-End' /> Front-End<br>
  <input type='radio' name='developer' value='Back-End' /> Back-End<br>

</div>

<div class='survey-question-2'>
  <p>How many years of experience do you have?</p>
  <input type='radio' name='years' value='less than 1' /> less than 1<br>
  <input type='radio' name='years' value='1-2' /> 1-2<br>
  <input type='radio' name='years' value='2-3' /> 2-3<br>
  <input type='radio' name='years' value='3-4' /> 3-4<br>
  <input type='radio' name='years' value='4-5' /> 4-5<br>
  <input type='radio' name='years' vale='more than 5'> more than 5<br>
</div>

CSS

/* Style Survey Name section */
.survey-name {
  color: green;
}

.survey-name input {
  border: 1px solid green;
}

/* Style Survey Q1 section */
.survey-question-1,
.survey-question-1 p {
  color: red;
}

.survey-question-1 input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  border: 2px solid gray;
}

.survey-question-1 input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: red;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid gray;
}

/* Style Survey Q2 section */
.survey-question-2,
.survey-question-2 p {
  color: blue;
}

.survey-question-2 input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  border: 2px solid gray;
}

.survey-question-2 input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: blue;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid gray;
}