JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar  navbar-dark bg-dark">
  <a class="navbar-brand" href="#">#</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#home">
          Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contents">
          Contents
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#team">
          Team
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="custom-covers">
          Custom Covers
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="advertising">
          Advertising
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">
          Contact
        </a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">

  <section id="home" class="pt-3 pb-3">

    <h1>Home</h1>

    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a magna interdum, imperdiet magna non, sodales odio. Cras rhoncus congue velit vitae iaculis. Nulla consequat, urna at suscipit aliquam, dolor neque tincidunt diam, in viverra turpis lacus
      et ipsum. Nullam...

JavaScript

// navigation scroll
$('.nav-link[href^="#"]').click(function() {
	e.preventDefault();

  alert('clicked');

  $('html,body').animate({
    scrollTop: $(this.hash).offset().top
  }, 200);

  return false;



});

$('.navbar').on('shown.bs.collapse', function () {
  alert('opened');
})

$('.navbar').on('hidden.bs.collapse', function () {
  alert('closed')
})