JSFiddle - React, Tailwind, and code Playground

JavaScript

// Doing this works fine in everything but IE 
$.fn.extend({
	scrollParent: function() {
		var scrollParent;
		if (($.ui.ie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
			scrollParent = this.parents().filter(function() {
				return (/(relative|absolute|fixed)/).test($.css(this,'position')) && (/(auto|scroll|hidden)/).test($.css(this,'overflow')+$.css(this,'overflow-y')+$.css(this,'overflow-x'));
			}).eq(0);
		} else {
			scrollParent = this.parents().filter(function() {
				return (/(auto|scroll|hidden)/).test($.css(this,'overflow')+$.css(this,'overflow-y')+$.css(this,'overflow-x'));
			}).eq(0);
		}
        
        // This is my test to see what the parent was being returned. In IE not matter what HTML DOCUMENT is being returned in IE
		test_s = (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent
        alert(test_s[0]);
        
		return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
	}	
});