JSFiddle - React, Tailwind, and code Playground

by Baybook

HTML

<div id="wrapper">
    <div id="tester"></div>


    <div id="r-401" onclick="reply_click(this.id)"></div>
    <div id="r-402" onclick="reply_click(this.id)"></div>
    <div id="r-403" onclick="reply_click(this.id)"></div>
    <div id="r-404" onclick="reply_click(this.id)"></div>
    <div id="r-405" onclick="reply_click(this.id)"></div>
    <div id="r-406" onclick="reply_click(this.id)"></div>
    <div id="myWindow"></div>
    <div id="myDiv"></div>

</div>

CSS

#wrapper{
    background:#ccccff;
    position:relative;
    z-index:0;
    width:944px ;

}
#tester {
background:url(http://vtour.dev4.webenabled.net/demo/back.jpg) no-repeat;
width:100px;
height:150px;
top:0px;
left:0px;
position:absolute;
}
#r-401:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_01.jpg) no-repeat;
}
#r-402:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_02.jpg) no-repeat;
}
#r-403:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_03.jpg) no-repeat;
}
#r-404:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_04.jpg) no-repeat;
}
#r-405:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_05.jpg) no-repeat;
}
#r-406:hover{
    background: url(http://vtour.dev4.webenabled.net/demo/demo_06.jpg) no-repeat;
}
#r-401{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:0px;
}
#r-402{
    position:absolute;
    width:50px;
    height:50px;
    top:0px;
    left:50px;
}
#r-403{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:0px;
}
#r-404{
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:50px;
}
#r-405{
    position:absolute;
    width:50px;
    height:50px;
    top:100px;
    left:0px;
}
#r-406{
    position:absolute;
    width:50px;
    height:50px;
    top:100px;
    left:50px;
}