JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_accordion">
    <ul>
    
    <li><a>h1</a>
      <div align="right" style=" margin-top: -16px;">
        <div class="toggle-light">
          <div class="toggle"></div>
        </div>
      </div>
      </li>
    </ul>
    <div>
      <p>interface</p>
      <div class="toggle-light">
        <div class="toggle"></div>
      </div>
        
    </div>
    <h3>F
      <div align="right" style=" margin-top: -16px;">
        <div class="toggle-light">
          <div class="toggle"></div>
        </div>
      </div>
    </h3>
    <div>
      <p> Feed Back
      <div class="toggle-light">
        <div class="toggle"></div>
      </div>
      </p>
    </div>
  </div>

CSS

.toggle-slide {
  overflow: hidden;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
}
 
.toggle-slide .toggle-blob {
  position: relative;
  z-index: 99;
  cursor: hand;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}


.toggle-light .toggle-slide .toggle-on, .toggle-light .toggle-slide .toggle-off, .toggle-light .toggle-slide .toggle-blob {
    font-size: 11px;
    font-weight: 500;
}
.toggle-light .toggle-slide .toggle-on, .toggle-light .toggle-select .toggle-inner .active {
    background: none repeat scroll 0 0 #45A31F;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2) inset;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
.toggle-light .toggle-slide .toggle-off, .toggle-light .toggle-select .toggle-on {
    background: linear-gradient(to bottom, #CFCFCF 0%, #F5F5F5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}
.toggle-light .toggle-slide .toggle-blob {
    background: linear-gradient(to top, #CFCFCF 0%, #F5F5F5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 50px 50px 50px 50px;
    box-shadow: 1px 1px 2px #888888;
}
.toggle-light .toggle-slide .toggle-blob:hover {
    background: linear-gradient(to bottom, #E4E4E4 0%, #F9F9F9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.toggle-iphone .toggle-slide {
    border-radius: 9999px 9999px 9999px 9999px;
    box-shadow: 0 0 0 1px #999999;
}
.toggle-iphone .toggle-slide .toggle-on, .toggle-iphone .toggle-slide .toggle-off, .toggle-iphone .toggle-slide .toggle-blob {
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.toggle-iphone .toggle-slide .toggle-on {
    background: none repeat scroll 0 0 #037BDA;
    border-radius: 9999px 0 0 9999px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4)...

JavaScript

// code for jqery toggle


/**
@license jQuery Toggles v2.0.4
Copyright 2013 Simon Tabor - MIT License
https://github.com/simontabor/jquery-toggles / http://simontabor.com/labs/toggles
*/
$.fn['toggles'] = function(options) {
  options = options || {};

  // extend default opts with the users options
  var opts = $.extend({
    'drag': true, // can the toggle be dragged
    'click': true, // can it be clicked to toggle
    'text': {
      'on': 'ON', // text for the ON position
      'off': 'OFF' // and off
    },
    'on': false, // is the toggle ON on init
    'animate': 250, // animation time
    'transition': 'ease-in-out', // animation transition,
    'checkbox': null, // the checkbox to toggle (for use in forms)
    'clicker': null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
    'width': 50, // width used if not set in css
    'height': 20, // height if not set in css
    'type': 'compact' // defaults to a compact toggle, other option is 'select' where both options are shown at once
  },options);

  var selectType = (opts['type'] == 'select');

  // ensure these are jquery elements
  opts['checkbox'] = $(opts['checkbox']); // doesnt matter for checkbox

  if (opts['clicker']) opts['clicker'] = $(opts['clicker']); // leave as null if not set

  // use native transitions if possible
  var transition = 'margin-left '+opts['animate']+'ms '+opts['transition'];
  var transitions = {
    '-webkit-transition': transition,
    '-moz-transition': transition,
    'transition': transition
  };

  // for resetting transitions to none
  var notransitions = {
    '-webkit-transition': '',
    '-moz-transition': '',
    'transition': ''
  };

  // this is the actual toggle function which does the toggling
  var doToggle = function(slide, width, height, state) {
    var active = slide.toggleClass('active').hasClass('active');

    if (state === active) return;

    var inner =...