JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
...