JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<input type="checkbox" id="check-me">  
     
    <label for="check-me">
      <span></span>
      <span class="check"></span>
      <span class="box"></span>
      Notifications
    </label>

CSS

main   { font-size:16px; }
.stuff { padding-top:60px; }

/* basic css */
input[type=checkbox]   { display:none; }
label, p               { padding-left:50px; }


/* checkbox css */
label                  { cursor:pointer; }
label span             { display:block; position:absolute; left:0; 
  -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; transition-duration:0.3s;
}
label .circle          {
  background:#FFF;
  left:-30px;
  top:-30px;
  height:80px;
  width:80px;
  z-index:-1;
  border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
}
label .box     {
  border:2px solid #000;
  height:20px; 
  width:20px;
  z-index:888;
  -webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s;
}
label .check         {
  top: -7px;
  left: 6px;
  width: 12px;
  height: 24px;
  border:2px solid #0f9d58;  
  border-top: none;
  border-left: none;
  opacity:0; 
  z-index:888;
  -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
  -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;
}

/* handling click events */

/* when checkbox is checked */
label .circle {
  -webkit-animation   :growCircle 0.3s ease;
  -moz-animation      :growCircle 0.3s ease;
  animation           :growCircle 0.3s ease;
}
input[type=checkbox]:checked ~ label .box { 
  opacity:0;
  -webkit-transform   :scale(0) rotate(-180deg);
  -moz-transform 		:scale(0) rotate(-180deg);
  transform 				:scale(0) rotate(-180deg);
}
input[type=checkbox]:checked ~ label .check {
  opacity:1; 
  -webkit-transform   :scale(1) rotate(45deg);
  -moz-transform      :scale(1) rotate(45deg);
  transform           :scale(1) rotate(45deg);
}

/* bubble animation */

@-webkit-keyframes growCircle {
  0%, 100%   { -webkit-transform:scale(0); }
  70%        { background:#DDD; -webkit-transform:scale(1.25); }
}
@-moz-keyframes growCircle {
  0%, 100%   { -moz-transform:scale(0); }
  70%        { background:#DDD;...

JavaScript

// per css-tricks restarting css animations
// https://css-tricks.com/restart-css-animation/
$('label').click(function() {
  
  // find the first span which is our circle/bubble
  var el = $(this).children('span:first-child');
  
  // add the bubble class (we do this so it doesnt show on page load)
  el.addClass('circle');
  
  // clone it
  var newone = el.clone(true);  
  
  // add the cloned version before our original
  el.before(newone);  
  
  // remove the original so that it is ready to run on next click
  $("." + el.attr("class") + ":last").remove();
});