JSFiddle - React, Tailwind, and code Playground

by everton

HTML

<div class="header"></div>

CSS

div.header {
 background-color: #00c;
    position: relative;
    height: 150px;
    width: 700px;
}

div.header span {
    display: block;
    height: 1px;
    background-color: #fff;
    margin: 0 auto;
    position: absolute;
}

JavaScript

var STEPS = 53;
var FACTOR = 5;

var $el = $('div.header');
var width = $el.outerWidth();

var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
    tmpWidth = stepWidth(i, width);
    $span.clone().css({
        'bottom': i + 'px',
        'width': tmpWidth,
        'left': (width - tmpWidth)/2
    }).appendTo($el);

}

function stepWidth(i, width){
    return -(1 / FACTOR * Math.pow(i, 2)) + width;
}