JSFiddle - React, Tailwind, and code Playground

by yodapt

HTML

<ul class="timeline">
    <li>
        <a href="#">
            <span class="week-day">Mon</span>
            <span class="month-day">11</span>
            <span class="matches">
                <span class="match"></span>
                <span class="match"></span>
                <span class="match"></span>
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="week-day">Tue</span>
            <span class="month-day">12</span>
            <span class="matches">
                <span class="match"></span>
                <span class="match"></span>
                <span class="match"></span>
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="week-day">Wed</span>
            <span class="month-day">13</span>
            <span class="matches">
                <span class="match"></span>
                <span class="match"></span>
                <span class="match"></span>
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="week-day">Thu</span>
            <span class="month-day">14</span>
            <span class="matches">
                <span class="match"></span>
                <span class="match"></span>
                <span class="match"></span>
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="week-day">Fri</span>
            <span class="month-day">15</span>
            <span class="matches">
                <span class="match"></span>
                <span class="match"></span>
                <span class="match"></span>
            </span>
        </a>
    </li>
    
</ul>

CSS

*, *:after, *:before {position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin:0;padding:0;}
body {font-family:sans-serif;}

.timeline {
    margin: 40px auto 0 auto;
    width: 90%;
    height: 75px;
    font-size: 0rem;
    border: 1px solid #9ec9e3;
    background: #f2f2f2;
}

.timeline>li {
    display: inline-block;
    width: 20%;
    height: 75px;
}

.timeline>li>a {
    text-align: center;
    color: #0087e6;
    font-size: 0.8rem;
    text-decoration: none;
}

.timeline>li>a>span {
    display: block;
    width: 100%;
    line-height: 20px;
}

.timeline>li>a>.month-day {
    color: #666;
}

.timeline>.entry>.matches {
    width: 100%;
    height: 20px;
}

.timeline>li>a>.matches {
    padding: 3px;
    font-size: 1rem;
}

.timeline>li>a>.matches>span:before {
    content: "\2022";
}