JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table align="center" border="1">
<thead><tr><th>Name</th><th>Address</th><th>Daytime Phone</th><th>Evening Phone</th><th>Cell Phone</th><th>Work Phone</th></tr>
</thead>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr><tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td></tr>
<tr><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer 1.....</td><td>customer...

JavaScript

window.floating_header = function() {

this.header = document.createElement('table');
this.header_height = 0;

this.getkeys = function(obj) {
    var keys = new Array();
    for ( var key in obj ) {
        keys.push(key);
    }
    return keys;
};
    
this.getXY = function( o ) {
    var y = 0;
    var x = 0;
    while( o != null ) {
        y += o.offsetTop;
        x += o.offsetLeft;
        o = o.offsetParent;
    }
    return { "x": x, "y": y };
}

this.setheader = function() {
    
        var win = window.pageYOffset ? window.pageYOffset : 0;
        var cel = document.documentElement ? document.documentElement.scrollTop : 0;
        var body = document.body ? document.body.scrollTop : 0;
        var result = win ? win : 0;
        if ( cel && ( ! result || ( result > cel ))) result = cel;
        var screenpos = body && ( ! result || ( result > body ) ) ? body : result;
        var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height;
        if ( screenpos > this.theady && screenpos < theady_max ) {
            this.header.style.top=Math.round(screenpos) + "px";
            this.header.style.left = this.table_obj.offsetLeft + "px";
            this.header.style.display = 'block';
            this.header_height = header.offsetHeight;
            
        }
        else {
            this.header.style.display = 'none';
        }
}

this.addclass = function(obj, newclass) {
    if ( obj.classes == null ) {
        obj.classes = new Array();
    }
    obj.classes[newclass] = 1;
    obj.className = this.getkeys(obj.classes).join(' ');
    return true;
};

this.theady = 0;

this.build_header = function() {
    this.table_obj = document.getElementsByTagName('THEAD');
    if ( ! this.table_obj ) {
        alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen");
        return;
    }
    this.table_obj = this.table_obj[0];
    while (...