JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="get" accept-charset="UTF-8">
    <div class="main">
        <div><h1>Output</h1></div>
        <div>
            <select id="selectionidx" name="selectionidx" class="scriptSelection" size="1" onChange="this.form.submit()">
                <option value="0" >link1</option>
                <option value="1" selected="selected" >link2</option>
            </select>
        </div>
        <pre id="script"><span class="placeHolder">The output block for JSON script!</span></pre>
        <div align="right"><a href="/runtime?viewMode=view" target="_blank">Job States</a></div>
    </div>
</form>

CSS

@charset "ISO-8859-1";
html, body
{
	height: 99%;
	width: 99%;
	overflow: hidden;
}

div{
    margin: 10px;
}

div.main {
	border-spacing: 10px;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	
	width: 99%; 
	height: 99%;
	
	border: thin solid;
}

pre{
	width: 95%;
    height: 80%;
	overflow: auto;
	
	outline: 1px solid #ccc; 
    padding: 5px;
	margin: 5px;
	
	text-align: left;
}

.scriptSelection { 
	resize: none; 
	width: 99%; 
	height: 100%;
	
	white-space: nowrap;
	overflow: auto;
}

.scriptSelection:focus {
	outline-color: LightSkyBlue;
}

JavaScript

function output(inp) {
    document.getElementById('script').innerHTML = inp;
}

var obj = [{"date":"1998-12-27","x1_volume":104626800,"x2_ratio":0},{"date":"1999-02-28","x1_volume":244379200,"x2_ratio":0},{"date":"1999-03-07","x1_volume":326336800,"x2_ratio":0},{"date":"1999-03-14","x1_volume":322491200,"x2_ratio":0},{"date":"1999-03-14","x1_volume":322491200,"x2_ratio":0}];

var str = JSON.stringify(obj, null, 4);
output( str );