JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div id= "center_console">
            <div id = "portal_wrapper">
                <div id="navtabs_bar">
                    <span id = "connect" class = "navtab">Connect</span>
                    <span id = "create" class = "navtab">Create</span>
                    <span id = "discover" class = "navtab">Discover</span>
                    <span id = "progress" class = "navtab">Progress</span>
                </div>
                <div id = "portal_display">
                    <div id = "connect_display" class = "portal_display_big4">
                        <!-- <iframe id = "video_embedded" width="680" height="360" src="http://www.youtube.com/embed/xnMJWq1BVuI?modestbranding=1&controls=1&autoplay=0&iv_load_policy=3" frameborder="0" autoplay allowfullscreen></iframe> -->
                    </div>
                    <div id = "create_display" class = "portal_display_big4">create display
                    </div>
                    <div id = "discover_display" class = "portal_display_big4">discover display
                    </div>
                    <div id = "progress_display" class = "portal_display_big4">progress display
                    </div>
                </div>
            </div>
        </div>

CSS

#portal_wrapper{
    width:680px;
    height:360px;
}
#portal_display{
    position:relative;
      height: 100%;
}
.portal_display_big4{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    background-color:blue;
}

#navtabs_bar{
    display:table;
    width:100%;
}


.navtab{
    display: table-cell;
    width: 25%;
    text-align:center;
    background-color:white;
    border:1px solid green;
}

#connect_display{
    background-color:red;
}
#create_display{
    background-color:green;
}
#connect_display{
    background-color:orange;
}
#connect_display{
    background-color:aqua;
}

JavaScript

$('.navtab').on('click', function(){
    id = this.id;
    display_id = '#' + id + '_display';
    $('.portal_display_big4').hide();
    $(display_id).show();
});