JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page">
<div id="container">
<div id="menu">
<ul class="slidingMenu">
<li><a href="#">LINK1</a>
</li>
</ul>
</div>
<div id="main">
<h1>Heading</h1>
<div id="content">
<img id="mainimg" src="http://onlyhdwallpapers.com/wallpaper/ball_monochrome_desktop_1680x1050_hd-wallpaper-183077.jpg" />
<p>text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
<div class="structure">
<img id="up" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg" />
<img id="down" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg" />
<div></div>
</div>
</div>
CSS
body {
background:#292929;
font-family: Arial, Helvetica, sans-serif;
}
#page {
display:inline-block;
text-align:center;
width:100%;
}
#container {
display:block;
background-color:red;
width:900px;
height:400px;
text-align:center;
}
#menu {
display:inline-block;
background-color:white;
width:40%;
overflow:none;
float:left;
}
ul {
list-style:none;
text-align:right;
}
ul a {
font-size:50px;
text-decoration: none;
line-height: 50px;
padding-right:10px;
color: #ddd;
}
ul a:hover {
background-color:#999967;
}
#main {
background-color:grey;
width:60%;
float:right;
max-height:400px;
position:relative;
}
#mainimg {
width:40%;
float:left;
margin:10px;
max-height:300px;
}
#main p {
text-align:justify;
padding-left:10px;
padding-right:10px;
margin-top:0px;
}
#content {
max-height:250px;
overflow-y:auto;
}
.structure {
display:block;
height:40px;
background-color:white;
width:20px;
}
#up {
position:absolute;
top:0px;
right:0px;
height:20px;
width:20px;
}
#down {
-webkit-transform: scaleY(-1);
position:absolute;
bottom:0px;
right:0px;
height:20px;
width:20px;
}