JSFiddle - React, Tailwind, and code Playground

by Lena R

HTML

<form>
<div class="form-group margin-3 radio-block">
      <label for="inputRadioPlace" class = "label-input pull-left">Определить автоматически</label>
    <div class="form-check">
<input type="radio" class="checkbox" id="checkbox"/>


<input type="radio" class="checkbox" id="checkbox"/>


<input type="radio" class="checkbox" id="checkbox"/>

    </div>    
</div>
</form>

CSS

label[for="checkbox"] {
	color: #fff;
}

.radio-block {
	border-bottom: 2px solid #eaeaea;
	width: 50%;
	padding-bottom: 10px;
}






/*Radio styles (Green radiobutton)*/
.checkbox {
  vertical-align: top;
  
  width: 17px;
  height: 17px;
}

.checkbox + label {
  cursor: pointer;
}


.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; 
  padding: 0 0 0 10px; 
}

.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0;
  width: 45px;
  height: 18px;
  border-radius: 13px;
  background: #82cf7f;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #06a000;
  box-shadow: 0 2px 5px rgba(0,0,0,.9);
  transition: all .2s; 
}

.checkbox:checked + label:before {
  background: #0df104;
}

.checkbox:checked + label:after {
  left: 26px;
}