JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="links">
    <div class="link">google</div>
    <div class="link">gmail</div>
    <div class="link">youtube</div>
</div>
<div id="container"></div>

CSS

#links{
    width:100%;
    height:30px;
    color:gray;
    border:1px solid gray;
}
.link{
    display:block;
    float:left;
    width:33%;
    text-align:center;
    cursor:pointer;
    height:30px;
    line-height:30px;
    vertical-align:middle;
}
.link:hover{
    color:red;
}
#container{
    width:100%;
    height:500px;
    scroll:auto;
    border:1px solid gray;
}

JavaScript

$(document).ready(function() {
    $('.link').click( function(){
        $('#container').load('http://www.google.com');
    });
});