JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <section>
    <h1>The Great Composers</h1>
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
  </section>
  <nav>
    <ul>
      <li><a href="#0">Gershwin</a></li>
      <li><a href="#0">Debussy</a></li>
      <li><a href="#0">Benjamin</a></li>
      <li><a href="#0">Dmitri</a></li>
    </ul>
  </nav>
</main>

CSS

body {
  background: url('Index-Background.jpg') no-repeat center center fixed;
  background-size: cover;
}

section {
  position:fixed;
  left: 5%;
  bottom: 40%;
  width:300px;
  height: 200px;
}

nav {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

nav ul {
  list-style: none;
}

nav ul li {
  float:left;
  margin-left: 10px;
}

nav ul li a{
  text-decoration: none;
  color: crimson;
}