JSFiddle - React, Tailwind, and code Playground

HTML

<title>jQuery UI Spinner Test</title>
<body onload="injectSpinner()">    
    <div id="mainPage" data-role="page">
        <div id="mainContent" data-role="content">
            <div id="moduleArea"/>
        </div>
    </div>
</body>

CSS

#mainPage
{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

#mainContent
{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

#moduleArea
{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

JavaScript

function injectSpinner(){
    console.log("Injecting Spinner");
    
    var p = document.createElement('p');
    var label = document.createElement('label');
    var text = document.createTextNode("Select a value:");
    var input = document.createElement('input');
    
    label.appendChild(text);
    label.setAttribute("for", "spinner");
    p.appendChild(label);
    
    input.setAttribute("id", "spinner");
    input.setAttribute("name", "value");
    p.appendChild(input);
    
    $("#moduleArea").append(p);
    $("#spinner").spinner();
    
    
};