JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<div id="content"></div>
<div id="ticketSeriesOfDots"></div>

CSS

#content {
    background-color: #0f0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#ticketSeriesOfDots {
    background-color: #000;
    bottom: 0;
    height: 45px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.ticketSeriesDot {
    border-radius: 100%;
    border: 1px solid #fff;
    display: inline-block;
    height: 15px;
    margin: 15px;
    width: 15px;
}

.ticketSeriesDot:hover,
.ticketSeriesDot.selected {
    background-color: #fff;
}

JavaScript

var numTickets = 5;

var ticketSeriesDot = '<div class="ticketSeriesDot"></div>';

for (var i = 0; i < numTickets; i++) {
    var dot = $(ticketSeriesDot);
    if (i === 0) {
        dot.addClass('selected');
    }
    $('#ticketSeriesOfDots').append(dot);
}