JSFiddle - React, Tailwind, and code Playground

by Andres Cisneros

HTML

<tr>
      <td class="checkbox-large on-and-off" style="padding: 5px 3px 15px 0;width: 200%;">
          <li class="">
              <label class="off-text" style="color: #FF0000;">OFF</label>
              <label class="on-text" style="color: #00BF07 ;">ON</label>
              <input type="checkbox" value="2">&nbsp;<label>Taxes Added On Top of Price</label>
          </li>
      </td>
  </tr>

CSS

.checkbox-large.on-and-off input[type="checkbox"] {
    margin: 5px 0px 8px 17px !important;
}


.checkbox-large.on-and-off li {
    width: 173px;
    /*width: 30%;*/
    align-items: inherit;
    text-align: initial;
    padding-right: 15px;
}

.event-reminder-buttons .checkbox-large.on-and-off li {
    width: 94%;
    padding-right: 25px;
}

.checkbox-large.on-and-off  li label {
    padding-left: 15px;
    text-align: left;
}


.checkbox-large.on-and-off  li label:nth-child(1) {
  padding-bottom: 5px;
  padding-left: 40px;
  position: absolute;
}

.checkbox-large.on-and-off  li label:nth-child(2) {
  padding-bottom: 5px;
  padding-left: 40px;
  position: absolute;
}



.checkbox-large  {
    flex-wrap: wrap;
    flex-direction: row;
    display: flex;
}

.checkbox-large  li {
  margin-bottom: 15px;
  margin-right: 15px;
  align-items: center;
  flex-direction: column-reverse;
  display: flex;
  width: 17%;
  border: 2px solid #CBCBCB;
  border-radius: 8px;
  text-align: -webkit-center;
}

.checkbox-large  li input {
    margin-bottom: 8px;
}

.checkbox-large  li label {
  margin-bottom: -15px;
  padding-top: 7px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

JavaScript

$(".checkbox-large input").click(function testing(){
    $(this).parent('li').toggleClass("green-border");
    $(this).siblings("input").click();
    // $(this).toggleClass("active");

    // toggle the on and off text
    if ($(this).parent("li").hasClass('green-border')) {
        $(this).siblings('.on-text').addClass('active');
        $(this).siblings('.off-text').removeClass('active');
    } else {
        $(this).siblings('.on-text').removeClass('active');
        $(this).siblings('.off-text').addClass('active');
    }
  });