JSFiddle - React, Tailwind, and code Playground

HTML

<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
  <body>
  <head>
  </head>
  
  <div class="dark-layer">
        <div class="container">
            <nav class="navbar navbar-expand-lg">
                <div class="container">
                    <a class="navbar-brand text-light" href="#">
                        Logo
                    </a>

                    <button class="navbar-toggler collapsed text-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    Expand
                    </button>

                    <div class="navbar-collapse collapse mr-auto" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item"><a href="#" class="nav-link text-light">Link 1</a></li>
                            <li class="nav-item"><a href="#" class="nav-link text-light">Link 2</a></li>
                            <li class="nav-item"><a href="#" class="nav-link text-light">Link 3</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
  

  <div>
    <div class="container">
      <h1>
        Some header
      </h1>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend tincidunt tellus, at ultrices erat bibendum a. Donec eget tortor tempus, dapibus eros fringilla, ultricies quam. Vivamus quis...

CSS

html {
  height:100%
}

body {
  background-image: url(https://images.pexels.com/photos/770151/pexels-photo-770151.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 0 auto;
    margin: 0 auto;
}

.dark-layer{
  background-color: rgba(0,0,0,.6);
  height:100%;
  width:100%;
  position:absolute;
}