JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-pull-right">
    <a href="#" class="pure-menu-heading">Site Title</a>

    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

<div class="pure-menu pure-menu-rtl pure-menu-open pure-menu-horizontal pure-menu-pull-right">
    <a href="#" class="pure-menu-heading">Site Title</a>

    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

CSS

.pure-menu.pure-menu-pull-right {
    background: #ccc;
    display: table;
    width: 100%;
    height: 5em;
    margin-bottom: 1em;
}
.pure-menu.pure-menu-pull-right .pure-menu-heading,
.pure-menu.pure-menu-pull-right > ul {
    display: table-cell;
    vertical-align: middle;
}
.pure-menu.pure-menu-pull-right > ul {
    text-align: right;
}
.pure-menu-rtl {
    direction: rtl;
}
.pure-menu-rtl.pure-menu-pull-right > ul {
    text-align: left;
}