JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="block_header new_tab">
<a href="/drugie-novosti/">Это интересно</a>
</h3>

CSS

body{
  margin-top:100px;
}
.block_header {
    border-bottom: 2px solid #A01818;
    margin: 0px 15px 0px 15px;
    text-align:right;
}
.new_tab a {
  transition:.5s;
  display:inline-block;
    background: #a01818;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Roboto",sans-serif;
    color:white;
    text-decoration:none;
    padding:5px;
    position:relative;
    height:16px;
}
.new_tab a::after {
    content: '';
    position: absolute;
    left:-25px;
    top:0;
    	border: 13px solid transparent;	
      border-right: 12px solid #a01818;
      border-bottom: 13px solid #a01818;
}
.new_tab a::before {
  transition:.5s;
    content: '';
    position: absolute;
    background: #a01818;
    width:calc(100% + 25px);
    height:0px;    
    left:-25px;
    bottom:0px;
}
.new_tab a:hover::before {
  height:16px;
  bottom:-16px;
  transition:.5s;
}
.new_tab a:hover {
  transition:.5s;
  transform:translateY(-14px);
}