JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="x" class="yesno rdbtn"/>Yes
  <input type="radio" name="x" class="yesno rdbtn"/>No
  <input type="radio" name="x" class="yesno rdbtn" checked/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>
<div class="container">

  <div class="radio_wrp">
  <input type="radio" name="y" class="yesno rdbtn" checked/>Yes
  <input type="radio" name="y" class="yesno rdbtn"/>No
  <input type="radio" name="y" class="yesno rdbtn"/>Maybe
  </div>
  <div class="submitbutton"><input type="submit" class="first"></div>
</div>

CSS

.container {
  width:500px;
  margin:0px auto;
  margin-top:50px;
}
.yesno {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 20px;
  border-radius: 14px;
  outline: 0;
  background: #9da6b0;
  -webkit-transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.yesno:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 11px;
  position: relative;
  top: 3px;
  left: 3px;
  -webkit-transition: all 0.15s ease-in-out;
}
.yesno:checked {
  background: #529ecc;
}
.yesno:checked:after {
  left: 13px;
}
.radio_wrp {
  float:left;
  width:500px;
  height:auto;
}
.submitbutton {
  float:left;
  width:50px;
  height:50px;
}
.first {display:none;}
.second{display:none;}

JavaScript

$('.rdbtn').click(function(){
            $('.first').show();
        });