JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<ul id="tabs" class="tabs-right tabs" data-tabs="tabs" style="">
        <li class="banana active"><a>Banana</a></li>
        <li class="monkey"><a>Monkey</a></li>
        <li class="woods"><a>Woods</a></li>
     

    </ul>
    </div>

CSS

.container{
    width:500px;
    background-color:#87CEFA;
    height:200px
}

.tabs-right{
float:right
}

ul.tabs a {
  color: #000;
  display: block;
  padding: 7px 15px 5px;
  outline: none;
}

ul.tabs {
  list-style: none;
  margin: 0;
  display: block;

}

ul.tabs>li {
  display: inline-block;
  position: relative;
  background-color: #FAFAFA;
  margin-top: 5px;
  margin-right:2px;
  border: 1px solid #ECECEC;
  margin-bottom: -1px;
  font-size: 14.5px;
  font-weight: bold;
  cursor:pointer;
}

ul.tabs>li.active {
  border-bottom-color: #FFF;
  background-color: #FFF;
}