JSFiddle - React, Tailwind, and code Playground

by simucal

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="progress">
        <ul class="bar">
            <li><a class="active" href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a href="#"> </a></li>
            <li><a class="active" href="#"> </a></li>
        </ul>
    </div>
</body>
</html>

CSS

.progress
{

}

.progress .bar
{
    width: 400px;
    list-style: none;
    padding:3px;
    display: table;
    background: #BEC5CD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.progress li 
{
    text-align: center;
    border-left: 1px solid white;
    display: table-cell;
}

.progress li:first-child
{
    border-left: 0;
}

.progress .bar a
{
    text-decoration: none;
    padding: 0 10px 0;
    height: 7px;
    display: block;
    text-align: center;
    background:#C0C0C0;
}

.progress .bar a.active
{
    background: #41A317;
}

.progress .bar a:hover
{
    background: #fcfcfc;
}