Make A Rich Harris With Tailwind CSS Like A Pro With The Help Of These 6 Tips

<div id="app">
  <div class="h-screen w-full bg-gray-50">
    <h1 class='text-2xl font-bold text-center'>Resizable Columns for Tailwind Table</h1>
    <h2 class='text-lg text-center'>Place cursor at beginning of 2nd or 3rd column and blue resizer will appear
</h2>
    <div class="flex w-full justify-center">
      <table class="table-fixed border border-gray-500 border-collapse w-4/5 mx-24 mt-14">
        <thead class="">
          <tr class="border-b-2 border-black">
            <th class="w-4/12 bg-gray-300 text-left px-2">Decedent Name</th>
            <th class="w-4/12 bg-gray-300 text-left px-2">Date of Death</th>
            <th class="w-4/12 bg-gray-300 text-left px-2">Age</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-400">
          <tr>
            <td class="text-left px-2">Jonathan Doe</td>
            <td class="px-2">09/01/1921</td>
            <td class="px-2">56</td>
          </tr>
          <tr>
            <td class="px-2">Sally Smith</td>
            <td class="px-2">09/04/1922</td>
            <td class="px-2">22</td>
          </tr>
          <tr>
            <td class="px-2">Walter Wilson</td>
            <td class="px-2">08/01/1926</td>
            <td class="px-2">70</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>

    let tables = document.getElementsByTagName("table");
      for (var i = 0; i < tables.length; i++) {
        resizableGrid(tables[i]);
      }
      function resizableGrid(table) {
        var row = table.getElementsByTagName("tr")[0],
          cols = row ? row.children : undefined;
        if (!cols) return;

        table.style.overflow = "hidden";

        var tableHeight = table.offsetHeight;

        for (var i = 0; i < cols.length; i++) {
          var div = createDiv(tableHeight);
          cols[i].appendChild(div);
          cols[i].style.position = "relative";
          setListeners(div);
        }

        function setListeners(div) {
          var pageX, curCol, nxtCol, curColWidth, nxtColWidth;

          div.addEventListener("mousedown", function (e) {
            curCol = e.target.parentElement;
            nxtCol = curCol.nextElementSibling;
            pageX = e.pageX;

            var padding = paddingDiff(curCol);

            curColWidth = curCol.offsetWidth - padding;
            if (nxtCol) nxtColWidth = nxtCol.offsetWidth - padding;
          });

          div.addEventListener("mouseover", function (e) {
            e.target.style.borderRight = "2px solid #0000ff";
          });

          div.addEventListener("mouseout", function (e) {
            e.target.style.borderRight = "";
          });

          document.addEventListener("mousemove", function (e) {
            if (curCol) {
              var diffX = e.pageX - pageX;

              if (nxtCol) nxtCol.style.width = nxtColWidth - diffX + "px";

              curCol.style.width = curColWidth + diffX + "px";
            }
          });

          document.addEventListener("mouseup", function (e) {
            curCol = undefined;
            nxtCol = undefined;
            pageX = undefined;
            nxtColWidth = undefined;
            curColWidth = undefined;
          });
        }

        function createDiv(height) {
          var div = document.createElement("div");
          div.style.top = 0;
          div.style.right = 0;
          div.style.width = "5px";
          div.style.position = "absolute";
          div.style.cursor = "col-resize";
          div.style.userSelect = "none";
          div.style.height = height + "px";
          return div;
        }

        function paddingDiff(col) {
          if (getStyleVal(col, "box-sizing") == "border-box") {
            return 0;
          }

          var padLeft = getStyleVal(col, "padding-left");
          var padRight = getStyleVal(col, "padding-right");
          return parseInt(padLeft) + parseInt(padRight);
        }

        function getStyleVal(elm, css) {
          return window.getComputedStyle(elm, null).getPropertyValue(css);
        }
      }
</script>

<script src="https://cdn.tailwindcss.com"></script>