JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="frame">
  Testing
</div>

SCSS

* {
  box-sizing: border-box;
}

.frame {
  width: 100vw;
  background: blue;
  height: 100vh;

  div {
    background: rgba(0, 0, 0, 0.25);
    content: 'sdf';
    height: 0.25rem;
    width: 100%;
    box-shadow: 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  }
}

JavaScript

function createLines(trgt, count){
// init
let shadowString = "0 0rem 0 rgba(0,0,0,0.25)";
let shadowCount = count
const target = document.querySelector(trgt);
// create dummy element
let newElm = document.createElement('div');
  newElm.style.position = 'absolute';
  newElm.style.top = '0';
  newElm.style.left = '0';
for (let i = 0; i < shadowCount; i++) {
//keep adding
    shadowString = shadowString + `,0 ${0.5 * i}rem 0 rgba(0,0,0,0.25)`;
  //when done
  if (i === (shadowCount - 1)) {
  // add bars
    newElm.style.boxShadow = shadowString;
    //add element to target
    target.appendChild(newElm);
    // make sure target holds
    target.style.position = 'relative';
  }
}

}

createLines('.frame', 20);