JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<body>
  <div id="banner-image">
    <div id="text-overlay">

      <span id="word-number-0">Lorem</span><span id="word-number-1">ipsum</span><span id="word-number-2">dolor</span><span id="word-number-3">sit</span><span id="word-number-4">amet</span><span id="word-number-5">at</span><span id="word-number-6">suas</span><span id="word-number-7">utamur</span><span id="word-number-8">bonorum</span><span id="word-number-9">usu</span><span id="word-number-10">Appareat</span><span id="word-number-11">oportere</span><span id="word-number-12">ad</span><span id="word-number-13">nec</span><span id="word-number-14">meis</span><span id="word-number-15">consulatu</span><span id="word-number-16">vel</span><span id="word-number-17">eu</span><span id="word-number-18">partem</span><span id="word-number-19">equidem</span><span id="word-number-20">duo</span><span id="word-number-21">ne</span><span id="word-number-22">Affert</span><span id="word-number-23">corrumpit</span><span id="word-number-24">no</span><span id="word-number-25">eos</span><span id="word-number-26">Te</span><span id="word-number-27">cum</span><span id="word-number-28">appareat</span><span id="word-number-29">urbanitas</span><span id="word-number-30">laudem</span><span id="word-number-31">meliore</span><span id="word-number-32">appellantur</span><span id="word-number-33">mel</span><span id="word-number-34">te</span><span id="word-number-35">Quo</span><span id="word-number-36">no</span><span id="word-number-37">noster</span><span id="word-number-38">periculis</span><span id="word-number-39">accusamus</span><span id="word-number-40">tale</span><span id="word-number-41">scriptorem</span><span id="word-number-42">ad</span><span id="word-number-43">quo</span><span id="word-number-44">Nec</span><span id="word-number-45">tale</span><span id="word-number-46">partiendo</span><span id="word-number-47">id</span><span id="word-number-48">Eros</span><span id="word-number-49">aliquam</span><span...

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

#banner-image {
  height: 0;
  padding: 0; 
  padding-bottom: 40%;
  background: linear-gradient( rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 0.5) ), url(http://placekitten.com/150/300);
  background-position: 0% 0%;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

#text-overlay {
  position: absolute;  
  width: 100%;
  height: 100%;
  overflow: hidden;
  word-spacing: 3px;
  transform: scale(1.3);
  text-align: center;
}

#text-overlay span {
display: inline-block;  padding-right: 4px;
  color: gray;
  cursor: pointer;
}