JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="box"></div>

CSS

#box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
}
.line {
    border: 1px solid blue;
    margin: 5px 0;
}

JavaScript

let box = document.getElementById('box');
for(let i = 100; i > 0; i -= 7) {
    let line = document.createElement('div');
    line.classList.add('line');
    line.style.width = i + '%';
    box.append(line);
}