JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="cover">
        <div class="centered title">
        </div>
    </div>
</body>

CSS

.centered {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
  background-position: center;
}

.cover .title {
  position: absolute;
  border: 0 none;
  border-radius: 10px;
  width: 375px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 30px 50px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px 50px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px 50px rgba(0, 0, 0, 0.5);
}