JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="get" accept-charset="UTF-8">
  <table>
    <tr><th align="left"><h1>Output</h1></th></tr>
    <tr><td align="left">
      <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>
    </td></tr>
    <tr><td align="center" class="scriptTD">
      <pre id="script"><span class="placeHolder">The output block for JSON script!</span></pre>
    </td></tr>
    <tr><td align="right"><a href="/runtime?viewMode=view" target="_blank">Job States</a></td></tr>
  </table>
</form>

CSS

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

h1
{
	display: inline;
	font-family: verdana;
	font-size: 36px;
	font-weight: normal;
	font-decoration: none;
	font-style: normal;
	font-variant: small-caps;
}

h2
{
	font-family: verdana;
	font-size: 28px;
	font-weight: normal;
	font-decoration: none;
	font-style: italic;
	font-variant: normal;
	text-align: center;
	color: #666666;
	margin: 10px 10px 20px 10px;
}

input
{
	font-family: verdana, Sans-Serif;
	font-size: 13px;

	border: solid 1.5px #333333;
	background-color: #eeeeee;
	color: #333333;

	padding: 5px;
	margin: 5px;
}

table {
	border-spacing: 10px;
	
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	
	width: 100%; 
	height: 100%;
	
	border: thin solid;
}

pre#script {
	width: 99%;
	height: 100px;
	overflow: auto;
	
	outline: 1px solid #ccc; 
	margin: 5px;
	
	text-align: left;
}

.scriptTD{
	height: 100%;
}

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

.scriptSelection:focus {
	outline-color: LightSkyBlue;
}
.placeHolder{
	color: Grey;
}
.string{ 
	color: RoyalBlue; 
}
.number{ 
	color: DarkOrange; 
}
.boolean{ 
	color: Green; 
}
.null{ 
	color: Red; 
}
.key{ 
	color: Maroon; 
	font-weight: bold; 
}
.error{
	color: Red;
}

JavaScript

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

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

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}];
  var str = JSON.stringify(obj, null, 4);
  output( syntaxHighlight(str) );