JSFiddle - React, Tailwind, and code Playground

by Paf_Sebastien

HTML

<div class="tab">
    <a class="tab-controller__item__link tab-controller__item__link--icon" href="#">
        Kampange &amp; Bonus
    </a>
</div>

CSS

.tab {
  display: inline-table;
  border-radius: 6px 6px 0 0;
  margin-right: 6px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  background-color: #717171;
  height: 100px;
}

.tab-controller__item__link {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 2em;
  display: table-cell;
  line-height: 1;
  height: 48px;
  vertical-align: middle;
  position: relative;
}