JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-unstyled">
    <li class="active center-element"><a href="#">Home</a></li>
    <li class="left-element"><a href="#">About Me</a></li>
    <li class="left-element"><a href="#">Work</a></li>
    <li class="right-element"><a href="#">Contact</a></li>
    <li class="right-element"><a href="#">Blog</a></li>
</ul>

CSS

.list-unstyled {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    list-style: none;
}

.list-unstyled li {
    margin: 5px;
}

.list-unstyled li.left-element {
    -webkit-box-ordinal-group: 0;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 0;      /* OLD - Firefox 19- */
    -ms-flex-order: 0;              /* TWEENER - IE 10 */
    -webkit-order: 0;               /* NEW - Chrome */
    order: 0;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.list-unstyled li.center-element {
    -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
    -ms-flex-order: 1;              /* TWEENER - IE 10 */
    -webkit-order: 1;               /* NEW - Chrome */
    order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.list-unstyled li.right-element {
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
    -ms-flex-order: 2;              /* TWEENER - IE 10 */
    -webkit-order: 2;               /* NEW - Chrome */
    order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}