JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background-image">
<h1>
    <div class="container">
        <span class="inner"></span>
        <span class="inner"><div class="overflow">&nbsp; HeadingText &nbsp;</div></span>
        <span class="inner"></span>
     </div>
</h1>

<h3>
    <div class="container centered">
        <span class="inner"></span>
        <span class="inner"><div class="overflow3">&nbsp; ENTER &nbsp;</div></span>
        <span class="inner"></span>
    </div>
</h3>
</div>

CSS

.background-image {
  background: url('https://images.unsplash.com/photo-1468245856972-a0333f3f8293?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=34e89b07aca66f94db009af4ae5505bf');
  background-size: contain;
  height: 500px;
  position: relative;
}
.centered {
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.container {text-align: center;}

          .inner {display: inline-block;
                position: relative;}

         .overflow {
             float: right;
             color: #ffffff;
             font: 100% "Arial Narrow", Arial;
             font-weight: light;
             font-style: italic;
             letter-spacing: 2px;
             background: rgb(0, 0, 0); /* fallback color */
             background: rgba(0, 0, 0, 0.3);
             padding: 1px;}

         .overflow3 {
             color: #ffffff;
             font: 265% "Arial Narrow", Arial;
             font-weight: light;
             font-style: italic;
             letter-spacing: 5px;
             background: rgb(0, 0, 0); /* fallback color */
             background: rgba(0, 0, 0, 0.3);
             padding: 1px;}