JSFiddle - React, Tailwind, and code Playground

HTML

<form class="vbo-views-form">
  <table class="views-table sticky-enabled cols-2 table table-hover table-striped table tableheader-processed sticky-table">
    <thead>
      <tr>
        <th class="views-field views-field-views-bulk-operations" scope="col">
          <div class="form-item form-type-checkbox checkbox"> <label class="control-label"><input class="vbo-table-select-all form-checkbox" type="checkbox" value="1" style="display: inline-block;"></label>
          </div>
        </th>
        <th class="views-field views-field-uid" scope="col">
          <a href="" title="sort by UID" class="active">UID</a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd views-row-first">
        <td class="views-field views-field-views-bulk-operations">
          <div class="form-item form-item-views-bulk-operations-0 form-type-checkbox checkbox"> 
            <label class="control-label" for="edit-views-bulk-operations-0">
              <input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="2">
            </label>
          </div>
        </td>
        <td class="views-field views-field-uid">
          2
        </td>
      </tr>
      <tr class="even">
        <td class="views-field views-field-views-bulk-operations">
          <div class="form-item form-item-views-bulk-operations-1 form-type-checkbox checkbox"> 
            <label class="control-label" for="edit-views-bulk-operations-1">
              <input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="3">
            </label>
          </div>
        </td>
        <td class="views-field views-field-uid">
          3
        </td>
      </tr>
      <tr class="odd views-row-last">
        <td class="views-field views-field-views-bulk-operations">
          <div class="form-item form-item-views-bulk-operations-2 form-type-checkbox checkbox"> 
       ...

SCSS

$pretty_checkbox_size: 1.25em;
$input-bg: white;
$input-border-radius-small: 1px;
$input-border: blue;
$input-color: blue;
$padding-base-horizontal: 20px;

.form-type-checkbox {
  input[type="checkbox"],
  input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  label {
    position: relative;
    display: inline;
    margin-left: 3px;
    padding-left: 25px;

    span.input {
      content: '';
      cursor: pointer;
      position: absolute;
      width: $pretty_checkbox_size;
      height: $pretty_checkbox_size;
      top: 0;
      left: 0;
      background: $input-bg;
      border-radius: $input-border-radius-small;
      border: 1px solid darken($input-border, 10%);
      /* @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
      @include standard_transition(); */

      &::after {
        content: 'x';
        color: $input-color;
        opacity: 0;
        font-family: 'Arial';
        position: absolute;
        width: $pretty_checkbox_size;
        height: $pretty_checkbox_size;
        top: -2px;
        left: -2px;
        text-align: center;
        line-height: $pretty_checkbox_size;
        /* @include standard_transition(); */
      }
    }
  }

  // Radio buttons.
  &.form-type-radio {
    label {
      span.input {
        border-radius: 50%;

        &::after {
          content: '';
          background: $input-color;
          width: $pretty_checkbox_size - 0.5em;
          height: $pretty_checkbox_size - 0.5em;
          margin-left: 0.125em;
          margin-top: 0.125em;
          border-radius: 50%;
          top: 0;
          left: 0;
        }
      }
    }

    &.checked label span.input::after {
      opacity: 1;
    }
  }

  // Hovered and focused states.
  &.hovered label span.input
  &.focused label span.input {
    border-color: $input-color;
  }

  // Checked state.
  &.checked label span.input::after {
    opacity: 1;
  }

  // Disabled state.
  &.form-disabled {
    label {
      cursor:...

JavaScript

var Drupal = Drupal || { 'settings': { 'vbo': { 'row_clickable': true } }, 'behaviors': {} };

Drupal.attachBehaviors = function (context, settings) {
  context = context || document;
  settings = settings || Drupal.settings;
  // Execute all of them.
  $.each(Drupal.behaviors, function () {
    if ($.isFunction(this.attach)) {
      this.attach(context, settings);
    }
  });
};

$.fn.once = function (events, callback) {
  //The handler is executed at most once per element for all event types.
  return this.each(function () {
    $(this).on(events, myCallback);
    function myCallback(e) {
      $(this).off(events, myCallback);
      callback.call(this, e);
    }
  });
};

/**
 * Add some JS-based state detection in order to allow prettier checkboxes
 * and radio buttons.
 */
Drupal.behaviors.prettyCheckboxes = {
  attach: function (context, settings) {
    // If there are are a ton of elements, don't bring the browser to a
    // screeching halt.
    var $elements = $('.form-type-checkbox, .form-type-radio', context);
    $elements.each(function () {
      // Used for styling purposes.
      $('label', this).prepend('<span class="input"></span>');

      var $input = $('input', this);

      // Add selected state on checkbox inputs.
      $('input[type="checkbox"]', this).each(function () {
        $(this).change(function (event) {
          if (event) {
            // Show change events.
            console.log($(this).attr('value'));
          }
          Drupal.behaviors.prettyCheckboxes.toggleCheckbox(this);

          // Uncheck the "select all" checkbox in the table header.
          var table = $(this).closest('table')[0];
          if (table) {
            var $selectAll = $('.vbo-table-select-all', table);
            Drupal.behaviors.prettyCheckboxes.toggleCheckbox($selectAll);
          }
        });

        Drupal.behaviors.prettyCheckboxes.toggleCheckbox(this);
      });

      // Check if this is a VBO "select all" checkbox.
      if...