JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="content">
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="text">
    <h3>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur modi earum assumenda dicta non quis accusantium ut exercitationem saepe reiciendis provident quia praesentium, dolor eum laborum libero eius nesciunt nulla?
    </h3>
  </div>
  <div class="image" style="background: url(https://picsum.photos/id/271/1300/900) no-repeat; background-attachment:fixed; background-position: center; background-size: cover;"></div>
</div>
<div class="content">
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="stick"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur modi earum assumenda dicta non quis accusantium ut exercitationem saepe reiciendis provident quia praesentium, dolor eum laborum libero eius nesciunt nulla?
  </div>
  <div class="image" style="background: url(https://picsum.photos/id/251/1200/900) no-repeat; background-attachment:fixed; background-position: center; background-size: cover;"></div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.content {
  width: 100%;
  height: 100vh;
  position: relative;
  background: darkblue;
}
div.content div.stick {
  width: 2px;
  height: 100%;
  background: white;
  position: absolute;
  left: 20%;
  z-index: 2;
}
div.content div.text {
  position: absolute;
  top: 50%;
  left: 200px;
  transform: translateY(-50%);
  color: white;
  z-index: 4;
}
div.content div.image {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.6;
}