JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<script src="http://fonts.googleapis.com/css?family=Droid+Sans"></script>
<div id="slide-ctn">
</div>
<div class="btm-nav">
    <div class="time-line">
        <div class="time-line-base"></div>
        <a href="#" class="date d-550 first-date active"><span>550 BCE</span></a>
        <a href="#" class="date d-540"><span>540</span></a>
        <a href="#" class="date d-530"><span>530</span></a>
        <a href="#" class="date d-520"><span>520</span></a>
        <a href="#" class="date d-505"><span>505</span></a>
        <a href="#" class="date d-490 d-alt"><span>490</span></a>
        <a href="#" class="date d-486 last-date"><span>486 BCE</span></a>
    </div>
</div>

CSS

body{
    margin:0;
    padding:0;
}

/* Slide Contain
==================================*/

#slide-ctn{
    display:block;
    width:100%;
    height:100%;
    position: absolute;
}
#slide-ctn{
    background:#FCCD70;
}

/* Timeline Navigation
==================================*/

.btm-nav{
    display:block;
    height:100px;
    width:100%;
    background:#fbfbfb;
    position:absolute;
    bottom:0;
    left:0;
    border-top:solid 1px rgba(34,34,34,.1)
}
.time-line{
    display:block;
    width:80%;
    height:100px;
    margin:0 auto;
    position:relative;
}
.time-line-base{
    display:block;
    height:2px;
    width:100%;
    background:#7D7D7D;
    position:absolute;
    top:49px;
}
a.date{
    display:block;
    height:10px;
    width:10px;
    border-radius:50%;
    background:#7D7D7D;
    position:absolute;
    top:45px;
    font-family: 'Droid Sans', sans-serif;
    text-align:center;
    text-decoration:none;
}
.date span{
    display:block;
    width:40px;
    margin:-20px -15px;
    font-size:12px;
    text-align:center;
    color:#7D7D7D;
}
.date.d-alt span{
    display:block;
    width:40px;
    margin:20px -15px;
    font-size:12px;
    text-align:center;
    color:#7D7D7D;
}
.date.first-date{
    left:0;
}
.date.last-date{
    right:0;
}
.date.first-date span,
.date.last-date span{
    width:60px;
    margin:-20px -25px;
}
.date.active{
    top:40px;
    width:10px;
    height:10px;
    background:#FBFBFB;
    border:5px solid #7D7D7D;
}
.date.active span{
    margin-top:-20px;
}
.date.d-540{
    left:15%;
}
.date.d-530{
    left:31%;
}
.date.d-520{
    left:46%;
}
.date.d-505{
    left:70%;
}
.date.d-490{
    left:94%;
}