JSFiddle - React, Tailwind, and code Playground

HTML

<title>Mockup of Zopim</title>
<body>
	<main>
        <nav class = "side-bar">
            <ul class ="main-bar">
                <li class="user-nav"><a class ="big-box" href="#">User</a></li>
                <li class="main-nav"><a href="#">Home</a></li>
                <li class="main-nav"><a href="#">Visitor List</a></li>
                <li class="main-nav"><a href="#">Visualization</a></li>
                <li class="main-nav"><a href="#">History</a></li>
                <li class="divider-nav"><a href="#">Manage</a></li>
                <li class="manage-nav"><a href="#">Agents</a></li>
                <li class="manage-nav"><a href="#">Departments</a></li>
                <li class="manage-nav"><a href="#">Shortcuts</a></li>
                <li class="manage-nav"><a href="#">Banned Visitors</a></li>
                <li class="manage-nav"><a href="#">Triggers</a></li>
                <li class="divider-nav"><a href="#">Settings</a></li>
                <li class="settings-nav"><a href="#">Widgets</a></li>
                <li class="settings-nav"><a href="#">Personal</a></li>
                <li class="settings-nav"><a href="#">Accounts</a></li>
            </ul>
       </nav>
       <article>
       	<header>
       		<h1>Hello!</h1>
       	</header>
       </article>
    </main>
</body>

CSS

@charset "utf-8";
/* CSS Document */
body {
    background-color: black;
}
main {
	width: 100%;
}
.side-bar {
    border-right: 100px solid transparent;
	border-top: 100vh solid #585858 ;
	width: 15%;
	height: 100%;
	background-color: #585858;
	position: relative;
	float: left;

}
nav li {
	list-style: none;
}
.main-bar {
	padding-left: 0px;
}
.main-bar li a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 2.5em;
	text-decoration: none;
	color: white;
	text-align: center;
}
article {
	width: 60%;
	height: 30%;
	float: right;
	position: relative; 
}
a.big-box {
	display: block;
    line-height: 7em;
}
header h1 {
    color: white;
}
}