JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

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

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

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}


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

#text-overlay {
  margin: -10px;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  position: absolute;  
  padding: 4px; 
  text-transform: lowercase;
  word-spacing: 3px;
}

#text-overlay div {
  flex-grow: 1;
  padding-right: 4px;
  color: yellow;
}