JSFiddle - React, Tailwind, and code Playground

HTML

<table class="unpadded-table">
<tr>
<td>
    <div id="screen">
    <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas>
    <div id="firstmenu">
        <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div>
    </div>
    <div id="secondmenu">
        <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div>
    </div>
</div>
</td>
</tr>
</table>

CSS

#firstmenu {
	float:right;
	background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top;
	padding-left: 10px;
	margin-left: -20px;
	margin-top: 15px;
	padding-top: 0px;
	width: 10px;
	height: 180px;
	position:relative;
    overflow:hidden;
    transition: left 0.5s;
     -webkit-transition: left 0.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	 display: inline-block;
}

#secondmenu {
	float:right;
	background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top;
	padding-left: 10px;
	margin-left: 0px;
	padding-top: 0px;
	width: 10px;
	height: 250px;
	position:relative;
    overflow:hidden;
    transition: left 0.5s;
     -webkit-transition: left 0.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	margin-top: 250px;
	 display: inline-block;
}

#firstmenucontents{
	background: #ffffff; 
	margin-right: 15px;
	margin-top: 0px;
	margin-left:0px;
	width: 135px;
	overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
	opacity:0.0;
	border:1px solid black;
	float:left;
}


#firstmenu:hover{
	width: 150px;
	opacity:1.0;
}

#secondmenu:hover{
	width: 150px;
	opacity:1.0;
}

#firstmenucontents:hover, #secondmenucontents:hover {
	opacity:1.0;
	width: 135px;
}

.example {
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
	border:1px #000 solid;
	float: left;
	width: 655px;
	margin-left: 100px;
	width: 

}