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">


<nav class="navbar navbar-expand-sm">
  <div class="nav navbar-nav">
    <a href="#nav-home" class="nav-item nav-link active" data-toggle="tab">Home</a>
    <a href="#nav-content1" class="nav-item nav-link" data-toggle="tab">Content1</a>
    <a href="#nav-content2" class="nav-item nav-link" data-toggle="tab">Content2</a>
    <!-- Not anymore, moved to footer now! -->
    <!-- <a href="#nav-imprint" class="nav-item nav-link" data-toggle="tab">Imprint</a> -->
  </div>
</nav>


<div class="tab-content" id="nav-tabContent">
  <div id="nav-home" class="tab-pane fade show active">
    Hello HOME
  </div>
  <div id="nav-content1" class="tab-pane fade">
    Hello Content 1
  </div>
  <div id="nav-content2" class="tab-pane fade">
    Hello Content 2
  </div>
  <div id="nav-imprint" class="tab-pane fade">
    Hello Imprint
  </div>
</div>

<footer>
  <a href="#nav-imprint" data-toggle="tab">Imprint</a>
</footer>

CSS

html {
  height: 100%;
}
body {
  padding: 20px;
  position: relative; 
  min-height: 100%
}
footer {
  bottom: 20px;
  width: 100%;
  position: fixed;
}

.nav-link {
    color: black;
}
.nav-link.active {
    color: red;
}