JSFiddle - React, Tailwind, and code Playground

by kpagcha

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="app">
  <header class="app-header">
    <a class="app-header__logo" href="#">Vali</a>
    <a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
    <ul class="app-nav"></ul>
  </header>
</div>
<aside class="app-sidebar">
  <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/48.jpg" alt="User Image">
    <div>
      <p class="app-sidebar__user-name">John Doe</p>
      <p class="app-sidebar__user-designation">Frontend Developer</p>
    </div>
  </div>
  <ul class="app-menu">
     <li><a class="app-menu__item active" href="#"><i class="app-menu__icon fa fa-list"></i><span class="app-menu__label">Item 1</span></a></li>
     <li><a class="app-menu__item" href="#"><i class="app-menu__icon fa fa-list"></i><span class="app-menu__label">Item 2</span></a></li>
     <li><a class="app-menu__item" href="#"><i class="app-menu__icon fa fa-list"></i><span class="app-menu__label">Last Item</span></a></li>
  </ul>
</aside>

CSS

body {
    margin: 0;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: 
#212529;
text-align: left;
background-color:
    #FFF;
}
.app-header {
    padding-right: 30px;
}
.app-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: 
    #009688;
    z-index: 1030;
    padding-right: 15px;
}
.app-header__logo {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    color: 
    #fff;
    text-align: center;
    font-family: 'Niconne';
    padding: 0 15px;
    font-size: 26px;
    font-weight: 400;
    line-height: 50px;
}
.app-header__logo {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    width: 230px;
    background-color: 
    #007d71;
}
.app-sidebar__toggle {
    padding: 0 15px;
    font-family: fontAwesome;
    color: 
    #fff;
    line-height: 2.4;
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
a {
    color: #009688;
    text-decoration: none;
    background-color: 
    transparent;
}
.app-nav {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
.app-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.list-unstyled, .app-nav, .app-menu, .treeview-menu {
    padding-left: 0;
    list-style: none;
}
ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}
.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding-top: 70px;
    width: 230px;
    overflow: auto;
    z-index: 10;
    background-color: 
#222d32;
-webkit-box-shadow: 0px 8px 17px rgba(0, 0, 0,...