JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigationHeader">
    <div class="navigationTitle">Title!</div>
    
    <div class="leftButton">
        <!-- redundant but needed for widget separation in GWT -->
        <div class="navigationButton left">
            <div class="navigationButtonText">Woof</div>
            <div class="arrowContainer">
                <div class="arrowViewport">
                    <div class="arrowViewportAlign">
                        <div class="arrowDiamond">
                            <div class="arrowSquare">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
    </div>
    
     <div class="rightButton">
        <!-- redundant but needed for widget separation in GWT -->
        <div class="navigationButton right arrow on">
            <div class="navigationButtonText">Woof</div>
            <div class="arrowContainer">
                <div class="arrowViewport">
                    <div class="arrowViewportAlign">
                        <div class="arrowDiamond">
                            <div class="arrowSquare">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
    </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
        sans-serif;
    margin: 0;
    /* http://stackoverflow.com/questions/3220662/uiwebview-font-is-thinner-in-portrait-than-landscape */
    -webkit-transform: translate3d(0, 0, 0);
    /* http://stackoverflow.com/questions/2967635/turn-off-grey-box-when-mousedown-in-mobile-safari */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/********************************************************/
/********************************************************/
/********************************************************/
/*****NAVIGATION HEADER CONSTRUCTS***********************/
.navigationHeader {
    position: relative;
    width: 100%;
    height: 44px;
    
    box-sizing: border-box;
    /* from screencap */
    background: -webkit-gradient(linear, left top,
        left bottom, from(rgb(181, 192, 206) ),
        to(rgb(109, 131, 161) ), color-stop(0.5, rgb(136, 155, 179) ),
        color-stop(0.5, rgb(127, 148, 176) ) );
    /* This is visible in the screencap */
    border-bottom: 1px solid rgb(45, 84, 51);
    /* Two lines in the screencap but cba to work out how to do half pixels */
    border-top: 1px solid rgb(204, 210, 218);
}

/* http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
.navigationTitle {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    text-shadow: 0px -1px rgba(0, 0, 0, 0.5);
    line-height: 44px;
    vertical-align: middle;
    top: -1px;
}

.leftButton {
    position: absolute;
    top: 7px;
    left: 10px;
}

.rightButton {
    position: absolute;
    top: 7px;
    right: 10px;
}

.left {
    
}

.right {
    
}

/* The basic, curvy-bordered button */
.navigationButton {
    position: relative;
    top: -1px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.5);
   ...