JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div id="DIV_1">
	<div id="DIV_2">
		<div id="DIV_3">
			<label for="incident.number" id="LABEL_4">
				<span id="SPAN_5"></span><span id="SPAN_6">Number</span>
			</label>
		</div>
		<div id="DIV_7">
			<div id="DIV_8">
				<input type="hidden" id="INPUT_9" name="sys_original.incident.number" value="INC0000050" />
			</div>
			<input type="text" id="INPUT_10" name="incident.number" maxlength="40" value="INC0000050" />
		</div>
		<div id="DIV_11">
		</div>
	</div>
	<div id="DIV_12">
		<div id="DIV_13">
			<label for="sys_display.incident.caller_id" id="LABEL_14">
			
			</label>
		</div>
		<div id="DIV_18">
			<div id="DIV_19">
				<input type="hidden" id="INPUT_20" name="sys_original.incident.caller_id" value="5b7c200d0a640069006b3845b5d0fa7c" />
			</div>
			<input type="hidden" id="INPUT_21" name="incident.caller_id" value="5b7c200d0a640069006b3845b5d0fa7c" />
			<input type="hidden" id="INPUT_22" name="sys_display.original.incident.caller_id" value="Jerrod Bennett" />
			<div id="DIV_23">
				<input id="INPUT_24" name="sys_display.incident.caller_id" type="text" value="Jerrod Bennett" /><span id="SPAN_25">A new record with this value will be created automatically</span><span id="SPAN_26"><a id="A_27" name="lookup.incident.caller_id" title="Lookup using list" tabindex="0"><span id="SPAN_28"></span><span id="SPAN_29">Lookup using list</span></a></span>
			</div>
		</div>
		<div id="DIV_30">
			<a id="A_31" name="show_incidents_2b1cb0424f11030099f1b2718110c79c:incident.caller_id" title="Show related incidents" tabindex="0"><span id="SPAN_32">Show related incidents</span></a>
			<script id="SCRIPT_33">// react to an onchange event
// show link if populated, hide if not
// move to js file for multiple inclusion
function decorationShow(element, original, changed, loading) {
	var $refButton = $j(gel('show_incidents_2b1cb0424f11030099f1b2718110c79c:incident.caller_id'));
	if (changed.length > 0)
		$refButton.show().children().show();
	else
		$refButton.hide();
}

//...

CSS

#DIV_1 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(52, 61, 71);
    float: left;
    height: 240.573px;
    left: 0px;
    min-height: 1px;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(52, 61, 71);
    text-size-adjust: 100%;
    top: 0px;
    width: 567.778px;
    column-rule-color: rgb(52, 61, 71);
    perspective-origin: 283.889px 120.278px;
    transform-origin: 283.889px 120.278px;
    caret-color: rgb(52, 61, 71);
    border: 0px none rgb(52, 61, 71);
    font: normal normal normal normal 13px / 18.5714px SourceSansPro, "Helvetica Neue", Arial;
    outline: rgb(52, 61, 71) none 0px;
    padding: 0px 15px;
}/*#DIV_1*/

#DIV_2, #DIV_38, #DIV_54 {
    box-sizing: border-box;
    color: rgb(52, 61, 71);
    height: 31.9965px;
    text-decoration: none solid rgb(52, 61, 71);
    text-size-adjust: 100%;
    width: 567.778px;
    column-rule-color: rgb(52, 61, 71);
    perspective-origin: 283.889px 15.9896px;
    transform-origin: 283.889px 15.9896px;
    caret-color: rgb(52, 61, 71);
    border: 0px none rgb(52, 61, 71);
    font: normal normal normal normal 13px / 18.5714px SourceSansPro, "Helvetica Neue", Arial;
    margin: 0px -15px 8px;
    outline: rgb(52, 61, 71) none 0px;
}/*#DIV_2, #DIV_38, #DIV_54*/

#DIV_2:after, #DIV_38:after, #DIV_54:after {
    box-sizing: border-box;
    clear: both;
    color: rgb(52, 61, 71);
    content: '"' '"';
    display: table;
    text-decoration: none solid rgb(52, 61, 71);
    text-size-adjust: 100%;
    column-rule-color: rgb(52, 61, 71);
    caret-color: rgb(52, 61, 71);
    border: 0px none rgb(52, 61, 71);
    font: normal normal normal normal 13px / 18.5714px SourceSansPro, "Helvetica Neue", Arial;
    outline: rgb(52, 61, 71) none 0px;
}/*#DIV_2:after, #DIV_38:after, #DIV_54:after*/

#DIV_2:before, #DIV_38:before, #DIV_54:before {
    box-sizing: border-box;
    color: rgb(52, 61, 71);
    content: '"' '"';
    display: table;
    text-decoration: none solid rgb(52,...