JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
<div class="list">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
  <div class="item">Seven</div>
  <div class="item">Eight</div>
</div>

CSS

.container {
  width: 80%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  position: absolute;
}

.triangle {
  border-top: 120px solid #0003;
  border-left: 50px solid #0000;
  border-right: 50px solid #0000;
  border-bottom: 120px solid #0000;
  width: 0px;
  height: 0px;
  position: absolute;
}

.list {
  top: 0px;
  left: 0px;
}

.item {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 20px;
  background: #0003;
  width: 50px;
}

JavaScript

$(document).ready(function() {
  var triangles = $('.triangle');
  let amountOfTriangles = triangles.length;
  for (var i = 0; i < amountOfTriangles; i++) {
    let singleTriangle = triangles[i];
    var rotdeg = 45 * i;
    $(singleTriangle).css({
      "transform": "rotate(" + rotdeg + "deg)"
    });
  }

  var $elems = $('.item');
  var $tri = $('.triangle');
  $elems.hover(function(e) {
    var indexOfElem = $elems.index(this);
    var indexOfTri = $tri.index(this);
    console.log("You hover an element with an index of: " + indexOfElem);
  });
});