JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div id="timeline">
    <ul>
        <li>blah</li>
        <li>blah blah</li>
        <li>ooh look at me</li>
        <li>some pictures</li>
        <li>I liked something</li>
    </ul>
</div>

CSS

#timeline {
    width: 450px;
    margin: auto;   
}

li {
    float: left;
    clear: left;
    height: 100px;
    width: 200px;
    background-color: lime;
    display: block;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;

}

li:nth-child(2n) {
    float: right;
    clear: right;
}

li:nth-child(2) {
    height: 200px;
}

li:nth-child(3) {
    height: 150px;
}