JSFiddle - React, Tailwind, and code Playground

by Zikes

HTML

<div class="module">
  <h2>Report <a href="#"><div class="arrow">Blue</div></a></h2>
  <!-- stuff in module -->
</div>

CSS

html{padding-top:3em;}
.module h2 {
    background: #ccc;
    padding: 0 0 0 10px;
    font-size: 16px;

    /* Thickness of the bar more easily achieved with line-height
       since padding would push link inward.  */
    line-height: 2;
}
.module h2 a {
    border-left: 4px dashed #fff;
    float: right;
    position: relative;
    text-decoration: none;
    color: #333;
    padding: 0 10px;
    -webkit-transition: padding 100ms ease-in;
    background-image: linear-gradient(top, rgb(138,158,255) 2%, rgb(45,161,16) 100%);
    background-image: -o-linear-gradient(top, rgb(138,158,255) 2%, rgb(45,161,16) 100%);
    background-image: -moz-linear-gradient(top, rgb(138,158,255) 2%, rgb(45,161,16) 100%);
    background-image: -webkit-linear-gradient(top, rgb(138,158,255) 2%, rgb(45,161,16) 100%);
    background-image: -ms-linear-gradient(top, rgb(138,158,255) 2%, rgb(45,161,16) 100%);
    
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.02, rgb(138,158,255)),
        color-stop(1, rgb(45,161,16))
    );
}
.module h2 a:hover{
    padding: 0 20px;
}

.module h2 a::before,
.module h2 a::after,
.module h2 .arrow::before,
.module h2 .arrow::after{
    content: "\0020";
    position: absolute;
    width: 5px;
    height: 10px;
    background: #fff;
    left:0;
}
.module h2 .arrow::after, .module h2 a::before{
    left:-8px;
    height: 12px;
}
.module h2 .arrow::after{bottom: 7px; -webkit-transform: rotate(-45deg);}
.module h2 a::before{top: 7px; -webkit-transform: rotate(45deg);}
/*.module h2 a::after{top: 0;} .module h2 .arrow::before{bottom: 0;}*/
.module h2 a::after, .module h2 .arrow::before{display:none;}