JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-6 col-sm-6 col-xs-12">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
      <span class="crtxt">Same as Registered Address?</span>
    </label>
  </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      <span class="br"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
      <span class="crtxt">Same as Registered Address?</span>
    </label>
  </div>
</div>

CSS

.checkbox {padding: 0;}
.checkbox>label {margin: 0;display: flex;}
.checkbox>label:after {content: '';display: table;clear: both;}
.checkbox>label>input[type="checkbox"]{display: none;}
.checkbox>label>input[type="checkbox"]:disabled + .cr, .checkbox>label>input[type="checkbox"]:disabled + .br {opacity: .5;}
.checkbox>label>span.cr, .checkbox>label>span.br {border: 1px solid #a9a9a9;width: 20px;height: 20px;margin: auto 0;display: flex;cursor: pointer;}
span.crtxt {margin-left: 10px;}
.checkbox>label>span.cr>.cr-icon, .checkbox>label>span.br>.cr-icon {font-size: 12px;margin: auto; color: #FFF;top:0;}
input[type="checkbox"] + .cr > .cr-icon, input[type="checkbox"] + .br > .cr-icon {
  transform: scale(3) rotateZ(-20deg);opacity: 0;transition: all .3s ease-in;
}
input[type="checkbox"]:checked + .cr {
  background: #54c2c8; border-color: #54c2c8; 
}
input[type="checkbox"]:checked + .br {
  background: #097FBE; border-color: #097FBE; 
}
input[type="checkbox"]:checked + .cr > .cr-icon, input[type="checkbox"]:checked + .br > .cr-icon {
  transform: scale(1) rotateZ(0deg);opacity: 1;
}