JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<a class="header2__nameplate" href="/" tabindex="-1">
  <div class="arrow2 arrow2_size_m arrow2_theme_nameplate-border">
    <div class="arrow2 arrow2_size_s arrow2_theme_nameplate">
      Yandex
    </div>
  </div>
</a>

CSS

.arrow2 {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.arrow2:before {
    position: absolute;
    top: 0;
    content: '';
    background-color: inherit;
    -webkit-transform: rotate(45deg) skew(18.435deg,18.435deg) scale(.53);
    -ms-transform: rotate(45deg) skew(18.435deg,18.435deg) scale(.53);
    transform: rotate(45deg) skew(18.435deg,18.435deg) scale(.53);
}
.arrow2_size_m {
    margin-right: 8px;
    line-height: 32px;
}
.arrow2_size_m:before {
    right: -16px;
    width: 32px;
    height: 32px;
}
.arrow2_size_s {
    margin-right: 7px;
    line-height: 28px;
}
.arrow2_size_s:before {
    right: -14px;
    width: 28px;
    height: 28px;
}
.arrow2_theme_nameplate-border {
    font-size: 17px;
    background-color: #fc0;
}
.arrow2.arrow2_theme_nameplate {
    margin: 2px 1px 2px 2px;
}
.arrow2_theme_nameplate {
    padding: 0 12px;
    background-color: #fff;
}
.header2__nameplate {
    text-decoration: none;
    color: #000!important;
    position: relative;
    z-index: 12;
    display: inline-block;
    font-family: textbook,arial,helvetica,sans-serif;
    outline: 0;
}