JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<header>
  <div class="container">
    <div class="row d-fixed">
      <div class="col">
        <div class="full-width nav-bg">
          <div class="container">
            <nav class="top-nav">
              <ul>
                <li>
                  Home
                </li>
                <li>
                  About
                </li>
                <li>
                  Renovations
                </li>
                <li>
                  Carpentry
                </li>
                <li>
                  Repairs
                </li>
                <li>
                  Contact
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
    <div class="full-width d-flex full-height">
      <div class="grey-back">
        <p>
          hi
        </p>
      </div>
      <div class="regular-back">
        <p>
          hi
        </p>

      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col">
      <blockquote>
        Bacon ipsum dolor amet ham hock pork bresaola shoulder swine frankfurter t-bone turducken shankle drumstick spare ribs beef tail kielbasa. Landjaeger alcatra beef ribs flank, tail hamburger rump buffalo beef burgdoggen. Drumstick prosciutto pork cupim
        pork loin porchetta. Jowl picanha pork chop biltong tenderloin sausage ribeye tri-tip tail cow flank jerky turducken. Tri-tip burgdoggen kevin, leberkas beef ribs pork chop ground round.
      </blockquote>
    </div>
  </div>
</div>

SCSS

body, html {
  height: 100%;
  position: relative;
  font-size: 18px;
  margin-bottom: 2rem;
}

header {
  min-height: 100%;
  height: 100%;
  width: 100%;
  background-image: url('https://s22293.pcdn.co/wp-content/uploads/DSC_5285.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 2rem;
  display: flex;
}

.top-nav {
  width: 100%;
  ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: #fff;
    padding: 1rem 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    z-index: 60;
      * {
        display: flex;
      }
    }
  }
  .grey-back {
    display: flex;
    flex: 4;
    background-color: rgba(0,0,0,0.7);
    height: 100%;
    flex-direction: column;
    z-index: 10;
  }
  .regular-back {
    display: flex;
    flex: 5;
  }
  .nav-bg{
    z-index: 20;
    background-color: rgba(255,255,255,0.4);
  }
.full-height {
  height: 100%;
  margin-bottom: -63px;
}
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}