JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="Header" style="background:yellow;">
    <div class="container">
        <div class="row align-items-center justify-content-between">
          <div class="col-4 col-sm-4 d-md-none  d-lg-none d-xl-none">
            <div class="Header__mobile__menu">
              <a id="mobile" href=""><i class="fa fa-bars" aria-hidden="true"></i></a>
            </div>
          </div>
          <div class="col-4 col-sm-4 d-md-none d-lg-none d-xl-none">
            <div class="Header__logo">
              <a href="">Logo</a>
            </div>
          </div>
          <div class="col-4 col-4 co-sm-4 d-md-none d-lg-none d-xl-none">
            <ul>
              <li><a href>Item Mobile</a></li>
            </ul>
          </div>
            <div class="d-none d-md-block d-lg-block d-xl-block col-md-4">
                <div class="Header__logo">
                    <a href="">Logo</a>
                </div>
            </div>
            <ul class="Mobile__nav">
                <li><a  href="">Item 1</a></li>
                <li><a  href="">Item 2</a></li>
                <li><a  href="">Item 3</a></li>
                <li><a  href="">Item 4</a></li>
                <li><a  href="">Item 5 <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
            </ul>
            <div class="col-8 col-sm-8 d-none d-md-block">
                <ul class="Header__nav">
                  <li><a  href="">Item 1</a></li>
                  <li><a  href="">Item 2</a></li>
                  <li><a  href="">Item 3</a></li>
                  <li><a  href="">Item 4</a></li>
                </ul>
            </div>
        </div>
    </div>

SCSS

.Header{
  padding: 15px 0;
  border-bottom: 1px solid orange;
  height:60px;
  
  ul{
    margin:0;
  }
}

.Mobile__nav{
  position: fixed;
  left: 0;
  top: 60px;
  width: 76%;
  height: 100%;
  min-width: 200px;
  max-width: 340px;
  background-color: gray;
  z-index: 1000;
  overflow: hidden;
  overflow-y: auto;

  li{
    display: block;
    width: 100%;
    padding:  20px;
  }

  li a{
    color: orange;

  }
}

.Header__logo{
  h1{
    color: orange;
  }
}

.Header__mobile__menu{
  cursor: pointer;
  float: left;
  a{
    color: orange;
  }
}

JavaScript

$('#mobile').click(function() {
    $("i", this).toggleClass("fa-fa-bars fa-fa-close");
});