JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed">
  <div class="card-wrapper">
    <div class="card">
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>
    <div class="card">
      Text
    </div>

  </div>
</div>

CSS

body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}

#fixed {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: url(https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&h=350);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.card-wrapper {
  width: 100%;
  height: 100%;
}

.card {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.875);
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-size: 14px;
  text-align: center;
  color: #FFFFFF;
}