JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div class="Sv8jHb">
  <label for="OVP4Ne" class="YOZSGb">Get notified about new posts</label>
  <div id="OVP4Ne" class="LsSwGf YvQesb" jscontroller="EcW08c" jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; keydown:I481le; contextmenu:mg9Pef" jsshadow="" jsname="OVP4Ne" aria-label="Get notified about new posts" tabindex="0" role="checkbox" aria-checked="false">
    <div class="hh4xKf MLPG7"></div>
    <div class="YGFwk MbhUzd"></div>
    <div class="rbsY8b">
      <div class="E7QdY espmsb" jsname="IT5dJd"></div>
    </div>
  </div>
</div>

CSS

.Sv8jHb {
    border-bottom: 1px solid rgba(0,0,0,0.12);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 16px;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.YOZSGb {
    -webkit-box-flex: 1 1;
    -webkit-flex: 1 1;
    flex: 1 1;
    margin-right: 8px;
}
.LsSwGf {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    outline: none;
    position: relative;
    vertical-align: middle;
    width: 37px;
    z-index: 0;
}

.YvQesb {
    -webkit-box-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.hh4xKf {
    -webkit-transition: border-color .3s ease;
    transition: border-color .3s ease;
    border: 7px solid #b9b9b9;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    position: absolute;
    top: 3px;
    width: 23px;
}
.YGFwk {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    -webkit-transition: opacity .15s ease,left .3s ease;
    transition: opacity .15s ease,left .3s ease;
    background-color: rgba(0,0,0,0.2);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 20px;
    left: 0;
    opacity: 0;
    outline: .1px solid transparent;
    pointer-events: none;
    position: absolute;
    width: 20px;
    z-index: -1;
}
.rbsY8b {
    -webkit-transition: -webkit-transform .06s ease;
    transition: -webkit-transform .06s ease;
    -webkit-transition: transform .06s ease;
    transition: transform .06s ease;
}
.E7QdY {
    -webkit-transition: border-color .3s ease;
    transition: border-color .3s ease;
    border:...

JavaScript

let t, cl = () => {t && clearTimeout(t)};
$("#OVP4Ne").on("click", function() {
	let e = $(this),
  label = e.prev("label");
  const checked = e.attr("aria-checked") == 'true';
  console.log({checked, cls: label.attr("class"), cls2: e.attr("class")})
  if (checked) {
  	e.addClass("qs41qe");
  	//e.removeClass("i9xfbb");
  	e.removeClass("N2RpBe");
    label.removeClass("N2RpBe");
    e.attr("aria-checked", "false");
  	cl(); t = setTimeout(()=> {
  	  e.removeClass("i9xfbb");
  		e.removeClass("qs41qe");
    }, 150);
  } else {
  	e.addClass("qs41qe");
  	e.addClass("N2RpBe");
    label.addClass("N2RpBe");
    e.attr("aria-checked", "true");
  	cl(); t = setTimeout(()=> {
  	  e.addClass("i9xfbb");
  		e.removeClass("qs41qe");
    }, 150);
  }
});

// qs41qe