JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<ul>
    <li class="visited"><a href="#">1</a></li>
    <li class="visited"><a href="#">2</a></li>
    <li class="visited"><a href="#">3</a></li>
    <li class="current"><a href="#">4</a></li>
    <li><a href="#">5</a></li>
</ul>
<div></div>

CSS

ul li {
    list-style: none;
    display: inline-block;
    width: 40px;
    height: 29px;
    border-radius: 40px;
    background: #BDBDBD;
    text-align: center; 
    padding-top: 11px;
    margin-left: 50px;
}

div {
    border-top: 4px solid #BDBDBD;
    width: 340px;
    margin: -38px 0 0 127px;
}

.visited {background: #86B404;}
.current {background:#753966;}
ul li:last-child a{color: #000;}
a {color: #fff; text-decoration: none;display: block;}