JSFiddle - React, Tailwind, and code Playground

by andi msc

HTML

<div class="timeline">
    <ul class="events">
        <li style="width: 42.48%; left: 57.2%;">Design &amp; Typography <em>(2007 - 2009)</em></li>
        <li style="width: 56.68%; left: 43%;">Photography <em>(2006 - 2009)</em></li>
        <li style="width: 71.3%; left: 28.4%;">Object Oriented Programming <em>(2005 - 2009)</em></li>
        <li style="width: 85.5%; left: 14.2%;">Web Development <em>(2004 - 2009)</em></li>
        <li style="width: 42.75%; left: 0;">3D Modeling and Rendering <em>(2003 - 2006)</em></li>
        <li style="width: 99.5%; left: 0;">Drawing &amp; Illustration <em>(2003 - 2008)</em></li>
    </ul> <!-- end .events -->

    <ul class="intervals">
        <li class="first">2003</li>
        <li>2004</li>
        <li>2005</li>
        <li>2006</li>
        <li>2007</li>
        <li class="last">2008</li>
    </ul> <!-- end .intervals -->
</div> <!-- end .timeline -->

CSS

ul.events {
    list-style-type: none;
    margin: 0;
    padding: 0 0 20px 0;
}

ul.events li {
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    background: #eee;
    border: 1px solid #ddd;
    color: #707070;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 3px 0;
    position: relative;
    text-align: center;
}

ul.events li em {
    color: #aaa;
    font-weight: normal;
    font-size: 0.9em;
}

ul.intervals {
    list-style-type: none;
    padding: 0;
    display: block;
}

/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */
ul.intervals li {
    background: #fff url(/images/1x1_eee.gif) repeat-x left 10%;
    border-right: 1px solid #ccc;
    color: #999;
    float: left;
    font-size: 1.2em;
    margin: 0;
    padding: 15px 0;
    text-align: center;
    width: 14.17%;
}

ul.intervals li.first {
    border-left: 1px solid #ccc;
}