JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<div class="container">
  <div class="title">
    <span>T</span>
    <span>o</span>
    <span>s</span>
    <span>t</span>
    <span>e</span>
    <span>r</span>
  </div>
  <div class="textpos">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
</div>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

html, body {
  width: 100%;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 100px;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  z-index: 6;
}
.title span {
  width: 16.6666666%;
  display: block;
  text-align: center;
}
ul {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,.1);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  z-index: 4;
}
ul li {
  width: 16.6666666%;
  height: 100%;
}
ul li:hover {
  background: rgba(0,0,0,.25);
}