JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<div id="tabs">
  <a href="#" class="button selected">Button 1</a>
  <a href="#" class="button">Button 2</a>
  <a href="#" class="button">Button 3</a>
  <a href="#" class="button">Button 4</a>
</div>

CSS

#tabs {
  text-align: center;
  display: flex; 
  justify-content: center;
  align-items: flex-start;
}

#tabs .button {
  border: 1px solid #999; 
  border-right-style: none; 
  display: inline-block;
  padding: 6px;
  text-decoration: none;
}
#tabs :first-child.button {
  border-top-left-radius: 5px; 
  border-bottom-left-radius: 5px; 
}
#tabs :last-child.button {
  border-right-style: solid; 
  border-top-right-radius: 5px; 
  border-bottom-right-radius: 5px; 
}
#tabs .button.selected, 
#tabs :active.button.selected, 
{
  border: 1px solid #999; 
  border-right-style: none; 
  display: inline-block;
  padding: 6px;
}