JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<link rel="stylesheet" href="https://basketball.exposureevents.com/content/less/site.css?v=3&amp;r=2">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://basketball.exposureevents.com/Areas/Directors/scripts/app.members.bracket.js?v=3&amp;r=5&amp;_=1554911902478"></script>
<div id="bracket-wrapper" style="height: 4200px; width: 3376px;" data-bind="css:{ 'copy-parts-location': copyParts.enabled() }, bracketPartSelectable: { filter: '.part-container' }">
  <div data-bind="template: { name: partTemplate, foreach: parts, afterAdd: afterPartAdd }">
    <div title="Hold and drag" data-bind="css: { 'editing': $root.members.bracket.editing() }" class="editing">
      <div class="part bracket-header ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" data-bind="bracketPartInit: { left: left, top: top, height: height, width: width, minWidth: 200, minHeight: 170, disabled: $root.members.bracket.disableDrag }"
        aria-disabled="true" style="top: 0px; left: 146px; height: 170px; width: 300px;">
        <div data-bind="scaleImage: { src: 'https://localhost:44360/assets/files/0?v=3', maxWidth: 100, maxHeight: 100, title: 'Exposure Events' }"><img src="https://localhost:44360/assets/files/0?v=3" alt="Exposure Events" style="width: 100px; height: 100px;"></div>
        <h2>Exposure Events</h2>
        <h1>17 and Underl Championship</h1>
        <div>Jul 17, 2019</div>
        <div class="part-actions">
          <button title="Delete" class="btn btn-danger btn-mini" data-bind="click: $root.members.bracket.deletePart.open.bind($data), visible: !editable()" style="display: none;"><i class="icon-remove icon-white"></i></button>
        </div>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000; display: block;"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000; display: block;"></div>
        <div class="ui-resizable-handle ui-resizable-se...

JavaScript

$('.bracket-part').hover(
  function() {
    debugger;
    $(this).addClass('forward');
  },
  function() {
    $(this).removeClass('forward');
  }
);