JSFiddle - React, Tailwind, and code Playground

by Bart Abayo

HTML

<header>
            <div id="headerBg">
                <div class="container">    
                    <div id="headerBgRight"></div>
                </div>
            </div>
            <!-- Header End -->
        </header>       
        <!--start Side panel-->
        <aside class="left-panel">
            <div class="list-panel">
                <ul class="list-unstyled">
                    <li class="category">
                        <a href="#dashboard">
                            <i class="glyphicon glyphicon-home"></i>
                            <span class="nav-label">Dashboard</span>
                        </a>
                    </li>
                    <li class="category has-submenu">
                        <a href="#">
                            <i class="glyphicon glyphicon-pencil"></i>
                            <span class="nav-label">Administratie</span>
                        </a>
                        
                        <ul class="list-unstyled">
                             <li class="group">
                                <a href="#">Klanten</a>
                             </li>   
                            <li class="group">
                                <a href="#administratie-abonnementen">Abonnementen</a>
                                <ul>
                                    <li class="sub-group">
                                        <a href="#administratie-abonnementen-AboOrders">Abo-Orders</a>
                                    </li>
                                    <li class="sub-group">
                                        <a href="#administratie-abonnementen-VoIPGrid">VoIPGrid</a>
                                    </li>
                                    <li class="sub-group">
                                        <a href="#">RoutIT</a>
                                    </li>
                                </ul>
                            </li>
                            <li...

CSS

html, body {
    height:100%;
}
body {
    margin:0px;
}

.left-panel {
    background-color: rgb(27,135,200);
    width: 220px;
    position: relative;
    height: 100%;
    float:left;
    overflow: hidden;
    outline: none;
}

.content > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

header {
    padding-top: 4px;
    padding-bottom: 4px;
	position: relative;
	top: 0px;
	width: 100%;
	background-color:#000;
	height: 131px;
    left:0px
}
#headerBg{
    background-color:#000;
    width: 100%;
    height: 131px;
    overflow: hidden;
}


.list-logo {
    padding-top: 20px;
    text-align: center; 
}
.list-panel {
    margin: 50px 0px 20px;
}
.nav-label{
    color: rgb(255,255,225);
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.list-unstyled >li {
    margin-left:0px;
}


/* ----------------Navigation----------------------*/
.list-panel {
  margin: 50px 0px;
}

.list-panel > ul > li {
  position: relative;
}

.list-panel > ul > li.active.has-submenu:after,
.list-panel > ul > li.has-submenu:hover:after {
  background-color: rgb(26,98,148);
  color: #fff;
}
.list-panel > ul {
  margin-top: 120px;
}
.list-panel > ul > li > a {
  display: block;
  padding: 12px 25px;
  color: #b4b6bd;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.4s;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  font-weight: 400;
  outline: none !important;
  border-bottom: 1px solid rgb(83,193,244);
  border-left: 3px solid #2f353f;
}
.list-panel > ul > li > a .badge {
  margin-top: 5px;
  float: right;
}
aside.left-panel.collapsed .list-panel > ul > li > a .badge {
  display: none;
}

.list-panel > ul > li > a:hover {
  color: #fff;
}

.list-panel > ul > li:hover > a,
.list-panel > ul > li.active:hover > a,
.list-panel > ul > li.active > a{
  color: #fff;
  background:...