JSFiddle - React, Tailwind, and code Playground

HTML

<div id="landingimg">
  <div class="inner">
    <h1>
      Velkommen til hele Danmarks Fristad!
    </h1>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

CSS

.clear {
  clear: both;
}
#landingimg{
  position: relative;
  background: url("https://www.icr.org/i/wide/cat_walking_wide.jpg") no-repeat;
  width: 960px;
  max-width:100%;
  height: 470px;
  background-size: cover;
  font-family: Arial, Helvetica, Sans-serif;
}
#landingimg div.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(43, 44, 44, 0.5);
  width: 400px;
  height: 100px;
  margin: -50px 0 0 -200px;
  display: table;
}
#landingimg div.inner > h1{
  padding: 0;
  margin: 0;
  text-align: center;
  color: #fff;
  font-weight: normal;
  display: table-cell;
  vertical-align: middle;
}