JSFiddle - React, Tailwind, and code Playground

HTML

<hr><br><br>
<div class="wiz-buttons">
<a class="previous" href="#">
    <span class="arrow"></span>
    <span class="arrow-inner"></span>
    <span class="button">Previous</span>
</a>
<a class="next" href="#">
    <span class="arrow"></span>
    <span class="arrow-inner"></span>
    <span class="button">Next</span>
</a>
</div>

CSS

.wiz-buttons > a {
    position: relative;
    display:block;
    font: normal 14px Arial;
    text-decoration: none;
    cursor:pointer;
}    

.wiz-buttons > a > .button {
    min-width: 75px;
}

/* Next Button */

.wiz-buttons > .next {
    color: #FFF;
}

.wiz-buttons > .next > .arrow-inner {
    display: block;
    position: absolute;
    top: 1px;
    right: 3px;
    z-index: 2000;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-left-color: #E38A13;    
}

.wiz-buttons > .next > .arrow {
    display: block;
    float: right;
    width: 0;
    height: 0;
    border:  15px solid transparent;
    border-left-color: #CC790B;
}

.wiz-buttons > .next > .button {
    display: block;
    float: right;
    line-height: 20px;
    background-color: #E38A13;
    border: 2px solid #CC790B;
    border-right: 0;
    padding: 3px 3px 3px 9px;
    text-align: center;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wiz-buttons > .next:hover > .arrow {
    border-left-color: #ad6608;
}

.wiz-buttons > .next:hover > .arrow-inner {
    border-left-color: #CC790B;
}

.wiz-buttons > .next:hover > .button {
    background-color: #CC790B;
    border-color: #b66c09;
}

/* Previous Button */

.wiz-buttons > .previous {
    color: #666;
}

.wiz-buttons > .previous > .arrow-inner {
    display: block;
    position: absolute;
    top: 1px;
    left: 3px;
    z-index: 2000;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-right-color: #f4f4f4;    
}

.wiz-buttons > .previous > .arrow {
    display: block;
    float: left;
   ...