JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<body class="ui-mobile-viewport ui-overlay-c">
    <!--  BODY START -->
    <div data-role="page" id="login" 
        class="ui-page-theme-c ui-page ui-page-header-fixed ui-page-footer-fixed ui-page-active">
        <div data-role="header" data-position="fixed">
            <h1>test page</h1>
        </div>
         <div role="main" class="ui-content" data-inset="true">
             <div id="nav"></div>
        </div>
        <!-- /header -->
        <div data-role="footer" data-position="fixed" role="contentinfo" class="ui-footer ui-bar-c ui-footer-fixed">footer</div>
            
    </div>
     </body>

CSS

.ui_nav{
    
    display:block;
   
}

.ui_nav_wrapper{
    position:absolute;
    top:20px;
    left:960px;
    width:150px;
    height:90%;
    display:block;
}

ul
{
   width: 60px;
   display: block;
}

li
{
    list-style: none;
    float:left;
    
    text-decoration: none;
    color: #333;
    padding: 14px 34px 14px 34px;
    background:silver;
    
    display: inline-block;
	list-style-type: none;
}

body
{
    width:960px;
    height:540px;
}

JavaScript

var _nav_menu = { 
    items :
    [
        { id : "first", name : "first" },
        { id : "second", name : "second" },
        { id : "third", name : "third" }
    ]
};

var Nav ={
    init : function(){
        //alert("init");
        var $menu = $('<div class="ui_nav_wrapper"><ul class="ui_nav"></ul><div>');
        for( var idx in _nav_menu.items )
            $menu.append('<li id="'+_nav_menu.items[idx].id +'">'+_nav_menu.items[idx].name +'</li>');
        
        $("#nav").append($menu);
    }
};


$(document).ready(function () {
    jQuery.support.cors = true; // needed to get cross domain access
    Nav.init();
});