JSFiddle - React, Tailwind, and code Playground

by anaketa

HTML

<ul class="tabs-menu">

  <li>
    <a class="tab-menu__tab tab-menu__tab--is-active bf_dom" href="javascript:;" rel:gt_act="item 1" rel:bf_bucket_data="{menu_tab: {tab: 'item 1'} }">Item 1</a>
  </li>

  <li>
    <a class="tab-menu__tab  bf_dom" href="javascript:;" rel:gt_act="item 2" rel:bf_bucket_data="{menu_tab: {tab: 'item 2'} }">Item 2</a>
  </li>

</ul>

SCSS

$color-link-hover: red;
$white: #fff;

a {
  text-decoration: none;
}

.tab-menu__tab { 
  position: relative;
  display: block;
  height: 45px;
  width: 196px;
  border: 2px solid $color-link-hover;
  padding: 1px 0 0;

  line-height: 45px;
  font-size: 15px;
  font-family: ProximaNovaSemibold;
  color: $color-link-hover;
  text-align: center;
  text-transform: uppercase;

  &:hover {
    background: $color-link-hover;
    color: $white;
  }

  &--is-active {
    background: $color-link-hover;
    color: $white;

    // Bars
    &:before {
      border-color: $color-link-hover transparent transparent;
      border-style: solid;
      border-width: 8px;
      content: " ";
      height: 0;
      left: 50%;
      margin-left: -8px;
      margin-top: 0;
      position: absolute;
      top: 48px;
      width: 0;
    }
  }
}


.tabs-menu { 
  list-style: none;
  margin: 0; 
  margin-bottom: 38px;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: inline-flex;
  
  -webkit-flex-flow: row wrap;
  
}