JSFiddle - React, Tailwind, and code Playground

by Bhesh Gurung

HTML

<div id="container">
    <div id="panel">
        
    </div>
    <div id="content">
fsfsfd
    </div>
</div>

CSS

#container   { background:pink }
#panel   { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot    { background:cornflowerblue }

JavaScript

$(document).ready(function () {
    var countries = [
        ['United States', 'United States'], 
        ['Canada', 'Canada'], 
        ['Argentina', 'Argentina'], 
        ['Armenia', 'Armenia']];
    var cList = $('#panel');
    $.each(countries, function(i) {
        var li = $('<div/>')
            .addClass('ui-menu-item')
            .text(countries[i][0])
            .hover(function() {
                var id = i;
                $("#content").text(countries[id][1]);
            }, function() {
                
            })
            .appendTo(cList);
    });
});