JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home_icon_wrap">
    <div class="home_icon">
        <a href="#">View all xx posts by name</a>
    </div>
</div>

CSS

.home_icon_wrap {
      float: right;
      background: #d83c3c;
      position: relative;
      width: 425px;
      height: 30px;
      -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
       box-shadow:0 1px 3px rgba(0, 0, 0, 0.3) ;
}
.home_icon {
      width: 425px;
      height: 30px;
      font: bold 11px 'lucida sans', 'trebuchet MS', 'Tahoma';
      color: #fff;
      text-transform: uppercase;
      text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
      vertical-align: middle;
      display: table-cell;
      text-align: left;
      padding: 0px;
}
div.home_icon > a {
    display: block;
    font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    text-decoration: none;
}
.home_icon_wrap:before { 
    content:"";
    position:absolute;
    right: 100%;
    border-top: 15px solid transparent;
    border-right: 15px solid #d83c3c;
    border-bottom: 15px solid transparent;
    width: 0;
    height: 0;
}