JSFiddle - React, Tailwind, and code Playground

HTML

<div><b></b><i></i><span>Try it!</span></div>

CSS

b {
  display: title;
  border-color: white white white transparent;
  border-style:solid;
  border-width: 50px 0 50px 75px;
  width:0;
  height:0;
  position: absolute;
    right: 0;
    top: 0;
}

i {
    background: transparent;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-color: white;
    border-width: 20px 0;
    border-style: solid;
    right: 75px;
}
span {
    display: block;
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    right: 60px;
    text-align: right;
    
    color: white;
    line-height: 60px;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: bold;
    font-family: helvetica;
}
div {
    height: 100px;
    position: relative;
    width: 250px;
    background: orange;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    text-shadow:0px -1px 0px #0B380F;
    background-image: -webkit-gradient(
    linear,
    left -10%,
    left 110%,
    color-stop(0, rgb(64,222,36)),
    color-stop(1, rgb(13,105,16))
);
    -webkit-background-size: 100% 120%;
background-image: -moz-linear-gradient(
    center top,
    rgb(64,222,36) -10%,
    rgb(13,105,16) 110%
);
    cursor: pointer;
}
div:hover {
    
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.21, rgb(64,222,36)),
    color-stop(0.79, rgb(13,105,16))
);
background-image: -moz-linear-gradient(
    center top,
    rgb(64,222,36) 21%,
    rgb(13,105,16) 79%
);
}

div:active {
    
    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.10, rgb(13,105,16)),
    color-stop(0.90, rgb(64,222,36))
);
background-image: -moz-linear-gradient(
    center top,
    rgb(13,105,16) 10%,
    rgb(64,222,36) 90%
);
}

JavaScript

// CSS arrow

// By Alan Hogan (http://alanhogan.com/)