JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div id="screen">
    <div id="navigation">
        <ul>
            <li>
                <div class='thumb' references='1'>
                <a href="#">
                <img src="http://www.odontex.net/Resources/download4php.jpeg" width="62px" height="63px">
                </a>
                </div>
            </li>
            <li>
                <div class='thumb' references='2'>
                <a href="#">
                <img src="http://www.odontex.net/Resources/download7php.jpeg" width="62px" height="63px">
                </a>
                </div>
            </li>
            <li>
                <div class='thumb' references='3'>
                <a href="#">
                <img src="http://www.odontex.net/Resources/aboutu2.jpeg" width="62px" height="63px">
                </a>
                </div>
            </li>
        </ul>
    </div>
    <div id="sections">
        <div class="content" thumbref="1">
             <img src="http://www.odontex.net/Resources/explicar.jpeg" width="150px" height="150px">
        </div>
        <div class="content" thumbref="2">
            <img src="http://www.odontex.net/Resources/explicara.jpeg" width="150px" height="150px">
        </div>
        <div class="content" thumbref="3">
        <img src="http://www.odontex.net/Resources/explicarb.jpeg" width="150px" height="150px">
        </div>
    </div>
</div>

CSS

body{ 
    padding: 0 5px;
    font-family: Verdana, sans-serif;
    background-color: #DDD;
}
ul, li, h4, h3, h2, h1, p{
    padding:0;
    margin:0;
    list-style:none;
}
#screen{
    position:relative;
    height:425px;
    width:725px;
    margin-top:30px;
    background-color:yellow;
}
#navigation{
    width:600px;
    /*text-align:center;*/
    margin-left:82px;
}
#navigation ul{
    /*margin-left:55px !important;*/
    /*margin-left:175px;*/
}
#navigation li{
    float:left;
    margin:0 35px 0 0;
    /*padding:10px 20px;*/
    background-color:grey;
}
#navigation a{
}
#sections{
    overflow:hidden;
    background-color:red;
    width:600px;
    height:369px;
    clear:left;
    margin-left:62px;
}
#sections ul{
    width:660px;
}
#sections li{
    float:left;
    padding:20px 30px 0 18px;
}
#content{
    float:left;
    padding:20px 30px 0 18px;
}

JavaScript

$(document).ready(function(){     
    $(".content").hide();     
    $(".thumb").hover(         
        function(){             
            $(".content[thumbref="+$(this).attr("references")+"]").show()         
        },         
        function(){             
            $(".content[thumbref="+$(this).attr("references")+"]").hide()         
        }     
    ); 
});