JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<body>

  <div class="main">


    <table>
      <table border="1">

        <tr>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
        </tr>
        <tr>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
        </tr>
        <tr>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
        </tr>
        <tr>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
          <th align="left">0000 AAAAAAAAAA</th>
        </tr>
      </table>

      <div class="a">

        <input type="checkbox" name="checkboxName" class="checkbox" />
        <div class="switch"></div>

      </div>
      <div class="a1">

        <label>
          <input type="checkbox" name="checkboxName" class="checkbox" />
         ...

CSS

table {
     min-width: 80%;
     background: white;
     color: black;
     zoom:0.1;
   }
   
   td,
   th {
     background: #fff;
     min-width: 80%;
   }

JavaScript

$(document).ready(function() {

      $('.switch').click(function() {
        $(this).toggleClass("switchOn");
      });