JSFiddle - React, Tailwind, and code Playground

by Ethan Hammond

HTML

<br>
    <header>

    </header>
<div class="leftbar">
    <a href="#" class="item">Item</p></a>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
</div>
<div class="centerpane">
    <p>This is the very center pane which will contain main data.</p>
</div>

CSS

body {
    height:100px;
    width: 1000px;
} 
   
header {
    position: absolute;
    border: solid 1px black;
    height: 35px;
    width: 337px;
    top 0px;
    left: 210px;
}
.leftbar {
    position: absolute;
    width: 200px;
    min-height: 346px;
    display:inline-block;
    border: solid 1px blue;
    left:0px;
}
.centerpane {
    position: absolute; 
    top: 70px;
    left: 210px;
   display:inline-block;
   min-height: 300px;
    height: 200px;
    border: solid 1px green;
    background: red;
}
.item {
    padding-bottom:10px;
	color:#333;
	border:0px solid red;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	white-space:nowrap;
	display:block;
	bottom:0;
	width:20px;
	height:20px;
	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
	font-size:24px;
	font-weight:normal;
	text-shadow: 0px 0px 1px #333;
}