JSFiddle - React, Tailwind, and code Playground

http://mattbango.com/notebook/web-development/pure-css-timeline/

by Jennifer Perrin

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 - 2009)</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>2008</li>
                <li class="last">2009</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: 1em;
            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;
            border-right: 1px solid #ccc;
            color: #999;
            float: left;
            font-size: 1em;
            margin: 0;
            padding: 15px 0;
            text-align: center;
            width: 14.17%;
        }

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