JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<header>
    <nav class="navbar navbar-expand-sm  fixed-top navbar-light bg-faded">
            <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <img class="navbar-brand navbar-logo" src="" />
        
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav ml-auto user-info">
                <li class="avatar">
                    <img src="">
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link ">Hello</a>
                </li>
            </ul>

        </div>
       

    </nav>
</header>

<div class="container-fluid">

    <div id="mySidenav">
    <nav class="col-sm-3 col-md-3 col-6 col-lg-2 d-sm-block sidebar collapse width " id="sidebar">
        <ul class="nav nav-pills flex-column">
            <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
                <a class="nav-link" >
                    <img src="" />Home </a>
            </li>  <ul class="sub-menu collapse" id="home">
                    <li class="nav-item list-unstyled">
                        <a class="nav-link" >Submenu1</a>
                    </li>
                    <li class="nav-item list-unstyled">
                        <a class="nav-link">Submenu2</a>
                    </li>
                    <li class="nav-item list-unstyled">
               ...

CSS

body {
    padding-top: 5.5rem;
    background-color: #F4F4F4;
}

/*
 * TopNav bar
 */

.navbar{
    background-color: #fff;
    z-index: 0;
}

.nav.nav-link a {
    color: #1C2058;
}
/*
 * Sidebar
 */

 .nav-link {
   position: relative;
   display: inline-block;
   width: 100%;
 
}

.sidebar .flex-column {
   position: absolute;
  
   width: 100%;
}

.sidebar {
    position: fixed;
    top: 69px;
    left: 0;
    z-index: 1;
    padding: 0;
    overflow-x: hidden;
  
    /* Scrollable contents if viewport is shorter than content. */
    border-right: 1px solid #eee;
    background-color: black;
    height: 100%;
  
}


.sidebar .nav-item {
    width: 100%;
}
.sidebar .nav-item+.nav-item {
    margin-left: 0;
}
.sidebar .nav-link {
    border-radius: 0;
}

.sidebar a {
    color: #fff;
}

.side:hover:not(.sub-menu) {
  
    background-color: rgba(244, 248, 252, 0.1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
 
}


.navbar-light .navbar-nav .nav-link{
    color:#1C2058;
    font-weight: bold
}

.avatar{
    margin:auto
}


.sub-menu li:hover {
    
    background-color: rgba(244, 248, 252, 0.1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
 
}




.dropdown{
    font-weight: bold;  
    color:#1C2058;
}


.nav-item .nav-link.active{
    background-color: #F4F8FC;
    font-weight:bold;
    color: #1C2058;
    display: inline-block;
    width:100%;

}

.nav-pills .active{
    background-color: #F4F8FC;
}

.sub-menu .nav-link.active{
    background-color:transparent;
    color:white;
}

.sub-menu .nav-link{
    font-size:13px;
}


.icons:hover{
    text-decoration: none
}

.icons{
    color: #1C2058;

}

.sub-menu.collapse.show{
    background-color:rgba(244,248,252,0.1);
    width:100%;
}

.navbar-toggler{
...