JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line">
</div>

CSS

.curve-1,
.curve-2
{
    border: solid 1px #f00;
    border-radius: 50px;
    display: inline-block;
    height: 20px;
    width: 20px;
}

.curve-1
{
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.curve-2
{
    border-top: none;
    border-left: none;
    border-right: none;
}

JavaScript

function makeLine(id, squiggleCount)
{
    var curve;
    var lineEl = $(id);
    
    for (var i = 0; i < squiggleCount ; i++)
    {
        curve = document.createElement('div');
        curve.className = 'curve-1';
        lineEl.append(curve);
        
        curve = document.createElement('div');
        curve.className = 'curve-2';
        lineEl.append(curve);
    }
}

$(document).ready(function(){
    makeLine('#line', 16);
});