JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<nav>
 <a href="#" id="prev">Prev</a>
 <a href="#" id="next">Next</a>
</nav>

CSS

#next,
#prev {
    color: #333;
    display: inline-block;
    font: normal bold 4em Arial,sans-serif;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: auto;
}

#next,
#prev { padding: 0.5em 1.5em }

#next { text-align: right }

#next:before,
#next:after,
#prev:before,
#prev:after {
    background: #333;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
    content: "";
    display: block;
    height: 0.5em;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1em;
}

#prev:before,
#prev:after { left: 0 }

#next:before,
#prev:before {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#next:after,
#prev:after {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#prev:after,
#next:before { margin-top: -.36em }

#next:hover,
#next:focus,
#prev:hover,
#prev:focus { color: #c00 }

#next:hover:before,
#next:hover:after,
#next:focus:before,
#next:focus:after,
#prev:hover:before,
#prev:hover:after,
#prev:focus:before,
#prev:focus:after { background: #c00 }

/* container styles  */

nav { text-align: center }