JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bl_eye">
  <input class="bl_eye-checkbox" type="checkbox" name="onoffswitch" id="bl_eye-checkbox">
  <label class="bl_eye-label" for="bl_eye-checkbox">
    <svg xmlns="http://www.w3.org/2000/svg" id="swich" x="0px" y="0px" viewBox="0 0 95 95" style="enable-background:new 0 0 95 95;" xml:space="preserve">
      <g transform="matrix(0.4615373,0,0,0.4615373,-70.294661,-182.88295)">
        <path class="swichRectangl" d="M296.7,496.9H214c-21.4,0-38.8-17.5-38.8-38.8l0,0c0-21.4,17.5-38.8,38.8-38.8h82.7   c21.4,0,38.8,17.5,38.8,38.8l0,0C335.6,479.4,318.1,496.9,296.7,496.9z" />
        <circle r="34" cy="458" cx="215" class="bl_eye_circle" />
        <path class="eyeborowLeft" d="M168,458.1c0-25.8,20.9-46.7,46.7-46.7" />
        <text class="swich_text" transform="matrix(2.1667 0 0 2.1667 269.3049 455.45)">ме</text>
        <text class="swich_text" transform="matrix(2.1667 0 0 2.1667 269.0055 478.4498)">ню</text>
        <path class="mouth" d="M178.4,517.7c42.5,42.5,111.4,42.5,153.9,0" />
        <path class="tongue" d="M312.3,551.8l-4.9,2.5c-4.2,2.1-9.3,0.4-11.4-3.8l-3.6-7.3l20.2-10l3.6,7.3   C318.2,544.5,316.4,549.7,312.3,551.8L312.3,551.8z" />
      </g>
      <path class="eyeborowRight" d="m 66.80813,7.0981188 c 11.82374,0 21.40188,9.5781442 21.40188,21.4018812" />
      </g>
    </svg>
  </label>
</div>

SCSS

.bl_eye {
  position: relative;
  margin-top: 58px;
  margin-left: 50px;
  display: inline-block;
  vertical-align: bottom;
  width: 95px;
  height: 95px;
  box-sizing: border-box;
  z-index: 999; }
  .bl_eye-checkbox {
    position: absolute;
    top: 25%;
    left: 45%; }
  .bl_eye #swich {
    cursor: pointer;
    z-index: 999; }
  .bl_eye-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .bl_eye .swichRectangl {
    fill: #201600;
    transition: all ease .3s; }
  .bl_eye .eyeborowLeft {
    opacity: 1;
    stroke-width: 3;
    fill: none;
    stroke-miterlimit: 10;
    stroke: #201600;
    transition: all ease .3s; }
  .bl_eye .eyeborowRight {
    fill: none;
    stroke-width: 1.6;
    stroke-miterlimit: 10;
    stroke: #fad9c2;
    transition: all ease .3s;
    opacity: 0; }
  .bl_eye .tongue {
    stroke: #201600;
    transition: all ease .3s; }
  .bl_eye .st1 {
    fill: #ed7d31; }
  .bl_eye .bl_eye_circle {
    fill: #ed7d31;
    transition: all ease .3s; }
  .bl_eye .mouth {
    fill: none;
    stroke: #201600;
    stroke-width: 3;
    stroke-miterlimit: 10;
    transition: all ease .3s; }
  .bl_eye .swich_text {
    font-size: 14px;
    font-family: "ArciformSanscyr", sans-serif;
    fill: #ed7d31; }
  .bl_eye .bl_eye-checkbox:checked + .bl_eye-label .bl_eye_circle {
    -webkit-transform: translateX(80px);
        -ms-transform: translateX(80px);
            transform: translateX(80px);
    transition: all ease .3s; }
  .bl_eye .bl_eye-checkbox:checked + .bl_eye-label .eyeborowRight {
    opacity: 1;
    transition: all ease .3s; }
  .bl_eye .bl_eye-checkbox:checked + .bl_eye-label .eyeborowLeft {
    opacity: 0;
    transition: all ease .3s; }
  .bl_eye .bl_eye-checkbox:checked + .bl_eye-label .swichRectangl {
    fill: #fad9c2;
    transition: all ease .3s; }
  .bl_eye .bl_eye-checkbox:checked + .bl_eye-label .mouth {
    stroke: #fad9c2;
    transition: all ease .3s; }
  .bl_eye .bl_eye-checkbox:checked...

JavaScript

var  eyeCircle = $(".bl_eye_circle");
       buttonEye = $(".bl_eye");

    buttonEye.on("click", function () {
        eyeCircle.css({ msTransform: 'translateX(80px)' });
    });