JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="outer">
  <div class="centered">I'm (almost) On A Boat</div>
</div>

CSS

body {
  margin: 0; padding: 0;
}
.outer {
  position: relative;
  background-image:url(http://i.imgur.com/55PnNyJ.jpg);
  height:100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.centered {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 50%; transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  color: hsla(0, 0%, 100%, 0.4);
  background-color: hsla(0, 0%, 0%, 0.4);
}