JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
    <ul>
        <li><a href="#tab-1">1</a></li>
        <li><a href="#tab-2">2</a></li>
    </ul>

    <div id="tab-1">
        <div class="toggles">
        <input class="toggle" type="checkbox" name="1" id="1" checked>
        <label for="1">checked with wrong icon</label>
        </div>
    </div>

    <div id="tab-2">
    </div>
</div>

JavaScript

$(document).ready(function(){ 

    $( "#tabs" ).tabs();

    $( ".toggles input" ).checkboxradio();
    $( ".toggles" ).controlgroup( {
      direction: "vertical"
    } );

});