JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body">
    <p><b>iTop REST/JSON API Test</b></p>
    <fieldset><legend>Server Parameters</legend>
<p>iTop Server URL: <input type="text" id="server_url" name="server_url" value="http://localhost/itop"/> (iTop server's URL, no trailing slash)<br/>
iTop Login: <input type="text" id="auth_user" name="auth_user" value="admin"/> Password: <input type="password" id="auth_pwd" name="auth_pwd" value=""/>
</p>
<p>API Version: <input type="text" id="version" name="version" value="1.0"/> <button type="button" onclick="return ListOperations()">List Operations</button></p>
<p>Use: <input type="radio" id="json" value="json" name="json"/><label for="json"> JSON</label>&nbsp;&nbsp;<input type="radio" id="jsonp" value="jsonp"  name="json" checked/><label for="jsonp"> JSON-P</label></p>
<p>
    </fieldset>
<fieldset><legend>Get Object</legend>
Class: <input type="text" id="get_class" value="Contact"/> Key: <input type="text" id="get_key" value="1"/> <button type="button" onclick="return GetObject()">Get Object</button>
</fieldset>
</p>
<p>
Result:<br/>
<pre>
<span id="result">
</span>
</pre>
</p>
    </div>

CSS

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
.body { padding: 10px; font-size:10pt; font-family:Verdana, Arial, Helvetica; }
fieldset { padding: 10px; border: 1px #ccc solid; }
legend { padding: 10px; background-color: #fff; }

JavaScript

function DoXSS(oJSON)
{
	var sVersion = $('#version').val();
	var sURL = $('#server_url').val()+"/webservices/rest.php?version="+sVersion;
	$('#result').html('');
	var sDataType = 'json';
	if ($(':input[name=json]:checked').val() == 'jsonp')
	{
		sDataType = 'jsonp';
	}

    $.ajax({
        type: "POST",
        url: sURL,
        dataType: sDataType,
		data: { auth_user: $('#auth_user').val(), auth_pwd: $('#auth_pwd').val(), json_data: JSON.stringify(oJSON) },
		crossDomain: 'true',
        success: function (data) {
			$('#result').html(syntaxHighlight(data));
        }
    });
	return false;
}

function ListOperations()
{
	$('#result').val('');
	var oJSON = {
		operation: 'list_operations'
	};

	DoXSS(oJSON);
}

function GetObject()
{
	$('#result').val('');
	var oJSON = {
		operation: 'core/get',
		'class': $('#get_class').val(),
		key: $('#get_key').val()
	};

	DoXSS(oJSON);
}

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    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>';
    });
}