JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="nav"></div>
  <div id="app"></div>
</body>
</html>

CSS

html {
  /*box-sizing: border-box;*/
  /*font-size: 20px;*/
  /*line-height: 30px;*/
}

/**,
*:before,
*:after {
  box-sizing: inherit;
}*/

body {
  /*background: #fff;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*-webkit-font-smoothing: antialiased;*/
  font-size: 20px;
  /*margin: 0;*/
}

body,
button,
input,
select,
textarea {
  /*font-family: "Heebo", sans-serif;*/
}

#app {
  /*width: 100%;*/
  /*margin: 0 auto;*/
  /*padding: 55px 16px;*/
  /*max-width: 1200px;*/
}

.navbar--site-header {
  background: linear-gradient(57deg, #00C6A7 0%, #1E4D92 100%);
  /*position: fixed;*/
  /*top: 0;*/
  /*left: 0;*/
  /*width: 100%;*/
  /*padding: 10px;*/
  /*z-index: 2000;*/
}

/*.navbar--container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1200px;
}*/

.navbar--site-header-inner {
  /*position: relative;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar--header-links {
  /*display: inline-flex;*/
  /*margin: 0;*/
}

.navbar--header-links li {
  display: inline-flex;
}

.navbar--header-links a:not(.button) {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 16px;
  padding: 8px 24px;
}

.navbar--header-links a:not(.button):hover,
.navbar--header-links a:not(.button):active {
  color: #FFF
}

JavaScript

const NavBar = () => (`
  <div class="navbar--site-header">
    <div class="navbar--container">
      <div class="navbar--site-header-inner">
        <a class="home-link" href="/">Home</a>
        <ul class="navbar--header-links">
          <li>
            <a href="/profile">Profile</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
          <li>
            <a href="/search">Search</a>
          </li>
          <li>
            <a id="logout" style="cursor: pointer">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
`);

const Body = () => {
  setTimeout(() => {
    const content = `
      <div>
        <h2>Body</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor urna nunc id cursus metus aliquam eleifend mi. Porttitor eget dolor morbi non arcu risus quis. Ac auctor augue mauris augue neque gravida in fermentum et. Mauris augue neque gravida in. Odio ut enim blandit volutpat. Nisl nunc mi ipsum faucibus vitae. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Sed sed risus pretium quam. Urna duis convallis convallis tellus id. Neque vitae tempus quam pellentesque.
          </p>

        <p>
          Euismod quis viverra nibh cras pulvinar mattis nunc. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Venenatis cras sed felis eget velit aliquet. Interdum varius sit amet mattis. Proin libero nunc consequat interdum varius sit. Dolor purus non enim praesent. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Consectetur libero id faucibus nisl tincidunt eget. Cras ornare arcu dui vivamus arcu felis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Sed euismod nisi porta lorem...