JSFiddle - React, Tailwind, and code Playground

HTML

<header class="fixed-top"></header>
        <nav class="navbar">
            <a class="navbar-brand ml-1">APP </a>
 </nav>


<div class="row ">
    <div class="col col-sm-2">
  
      <ul class="side-menu">
  
      <div class="side-menu-user-infos">
          <div class="side-menu-user-photo">
              <img src="" alt="">
          </div>
          <div *ngIf="(user$ | async) as username; else login">
              <div class="side-menu-user-name">
                  {{ username.username }}
              </div>
          </div>
          <div class="side-menu-user-options">
              <i class="fas fa-user-cog"></i>
              <i class="fas fa-power-off" (click)="logout()"></i>           
          </div>
  
      </div>
  
      <li>
          <a>
              <span class="fas fa-chalkboard"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-user-plus"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-cart-plus"></span>
              Menu
          </a>
      </li>
      <li>
          <a>
              <span class="fas fa-store"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-file-alt"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-chart-bar"></span>
              Menu
          </a>
      </li>    
      <li>
          <a>
              <span class="fas fa-cog"></span>
              Menu
          </a>
      </li>   
   </ul>
</div>

<div class="content">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
     ...

CSS

.navbar {
    background: #374147;
    color: rgba(170, 175, 184)
}


@import 'https://fonts.googleapis.com/css?family=Roboto';

@import url('https://fonts.googleapis.com/css?family=Concert+One|Patua+One');

.side-menu {
  font-family: 'Roboto', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  height: 100%;
  width: 270px;
  list-style-type: none;
  background: #FFF;
  overflow: hidden;
  transition: width .7s;
  margin-top:57px;  
  box-shadow: 1px 1px 4px;
  float: left;
}

.side-menu li {
  width: 300px;
}

.side-menu li span {
  font-size: 1rem;
  margin: 20px 30px 0 22px;
}

.side-menu li a {
  display: block;
  font-size: .9rem;
  text-decoration: none;
  color: rgba(155, 158, 162);
  height: 60px;
}

.side-menu li a:hover {
    background-color: rgb(236, 247, 247)
}

.side-menu-user-infos {
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
}

.side-menu-user-photo {  
  border-radius: 50%;
  width: 30%;
  height: 80px;
  margin: 30px auto 0 auto;
  position: relative;
  box-shadow: 1px 1px 7px;
}

img {
  width: 100%;
  height: 100%;
}

.side-menu-user-name {
  color: #374147;
  margin: 15px auto 0 auto;
  font-family: 'Concert One', cursive;
  text-align: center;
}

.side-menu-user-options {
  color: rgba(155, 158, 162);  
  text-align: center;  
}

.side-menu-user-options i {
  padding: 10px;
}

.content {
  border: 1px solid;
  margin: 3px;
  float: right;
}

@media screen and (max-width: 600px) {
    .side-menu {
    width: 60px;
  }
   .side-menu-user-infos {
     height: 230px;
   }
   .side-menu-user-photo{
    display: hidden;
   }
}