JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<a class="btnPointy" href="#">
    <span class="myButton">Next</span>
    <span class="arrowContainer">
        <span class="arrow"></span>
        <span class="arrowinner"></span>  
    </span>
</a>

CSS

.arrowContainer{
    position: relative;
    display:block;
    height:32px;
    width: 30px;
    float:left;
    margin-left: -19px;
}
.btnPointy {
    position: relative;
    font: normal 14px Arial;
    text-decoration: none;
    cursor:default;
}    

.btnPointy {
    color: #FFF;
    border-radius: 2px;
}

.btnPointy .myButton{
    padding-right: 36px;
}

.arrowContainer > .arrow {
    display: block;
    position:absolute;
    left:-1px;
    width: 0;
    height: 0;
    border:  16px solid transparent;
    border-top-color: #20538D;
    border-bottom-color: #20538D;
}
.arrowContainer > .arrowinner {
    display: block;
    position:absolute;
    left : 1px;
    top: 0;
    width: 0;
    height: 0;
    border:  16px solid transparent;
    border-top-color: #FFF;
    border-bottom-color: #FFF;
}

.btnPointy:active .arrow{
    border-top-color: #203E5F;
    border-bottom-color: #203E5F;
}

.myButton {
    float:left;
	margin-right: 2px;
	position: relative;
	background-color:#00253d;
	display:inline-block !important;
	color:#ffffff !important;
	font-family:arial;
	font-size:13px;
	font-weight:normal;
	padding:6px 24px;
	text-decoration:none !important;
	text-shadow:0px 1px 0px #154682;
	text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.3);
}
.btnPointy:hover > .myButton {
    cursor: default;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00bod8), color-stop(1, #1a4d80 ));
	background:-moz-linear-gradient(center top, #00b0d8 5%, #1a4d80  100%) repeat scroll 0 0 #0061A7;
	background:-webkit-linear-gradient(center top, #00b0d8 5%, #1a4d80 ...