JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div id="dialog">
    <p>Hello, my name is: <span class="name"></span>
    </p>
    <div class="content">
        <!-- Content goes here -->
    </div>
</div>
<ul id="names">
    <li data-name="Hasen"><a href="#">Hasen</a></li>
    <li data-name="Todd"><a href="#">Todd</a></li>
    <li data-name="Patricia"><a href="#">Patricia</a></li>
    <li data-name="Hasen"><a href="#">Hasen</a></li>
    <li data-name="Todd"><a href="#">Todd</a></li>
    <li data-name="Patricia"><a href="#">Patricia</a></li>
    <li data-name="Hasen"><a href="#">Hasen</a></li>
    <li data-name="Todd"><a href="#">Todd</a></li>
    <li data-name="Patricia"><a href="#">Patricia</a></li>
</ul>

CSS

ul#names {
    width: 150px;
    background: #292929;
    color: #fff;
    list-style: none;
    padding-left: 0;
    font-size: 10px;
}

ul#names li {
    padding: 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid #3c3c3c;
}

ul#names li a {
    color: #6dd6e0;
}

ul#names li.selected {
    width: 175px;
    background: #fff;
    border-color: #A6C9E2;
    position: relative;
    z-index: 1000;
}

ul.selected#names li {
    position: relative;
    cursor: pointer;
}

ul.selected#names li:after {
    content: "\00BB";
    font-weight: bold;
    position: absolute;
    right: 10%;
    z-index: 400;
    cursor: crosshair;
}

ul.selected#names li.selected:after {
    right: 31%;
    color: #cccccc;
}

JavaScript

var myDialog = $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false,
    close: function() {
        /* Clear selection */
        $("ul.selected#names,\
          ul#names > li.selected").removeClass("selected");
    }
})

$("ul#names > li").click(function () {
    var myName = $(this).data("name");

    /* Highlight selected name (li) */
    $("ul#names").toggleClass("selected", true)
    .find("> li.selected").removeClass("selected");
//    $(this).toggleClass("selected", true);
    
    /* Open Dialog & set position */
    myDialog.dialog("option", "position", {
        my: "left-1 top-55%",
        at: "right",
        of: $(this)
    })
    if (myDialog.dialog("isOpen") !== true) myDialog.dialog("open")
    
    /* Change dialog title */
    myDialog.dialog("option", "title", myName);

    /* Change dialog contents */
    myDialog.find("span.name").text(myName);
    myDialog.find("div.content").html("Set content here!");
})