JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://versionone.github.io/VersionOne.SDK.JavaScript/v1browsersdk.js"></script>
<html>
<body>
    <div id="memberPanel">
        <h2>Email:<span id="Email"></span></h2>
        <div>
            Username: <span id="Username"></span><br />
            ID: <span id="ID"></span><br />
            <!-- Owned Workitems: <span id="OwnedWorkitems"></span><br /> -->
        </div>
    </div>
    <div id="error" class="ui-icon ui-icon-alert"></div>    
</body>
</html>

CSS

#memberPanel {
    margin: 10px;
    padding: 8px;
    border: 2px solid darkblue;    
    background: lightgray;    
}

#memberPanel h2 { 
 background: chartreuse; /* you know you love it. */
}

#error {
    visibility:hidden;
}

JavaScript

var hostname = "ec2-54-205-135-234.compute-1.amazonaws.com";
var instance = "VersionOne";
var username = "admin";
var password = "admin";
var port = "80";
var protocol = "http";

var server = new v1sdk.V1Server(hostname, instance, username, password, port, protocol);
var v1 = new v1sdk.V1Meta(server);

v1.query({
    from: "Member",
    where: {
        IsSelf: true
    },
    select: ['Email', 'Username', 'ID'], // 'OwnedWorkitems.@Count'],
    
    success: function(result) {
        console.log(result);
        $('#error').hide();    
        $("#Email").text(result.Email);
        $("#ID").text(result.ID);
        $("#Username").text(result.Username);
        //$("#OwnedWorkitems").text(result.data['OwnedWorkitems_@Count']);
        $("#memberPanel")
            .accordion({collapsible:true})
            .show();
    },
    
    error: function(err) { // NOTE: this is not working correctly yet, not called...
        $('#memberPanel').hide();
        $('#error').html(err).show();        
    }
});