JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div>
  <div class="tabs">
    <a class="active" href="#">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">+</a>
  </div>
  <div class="content">
    <svg height="30" width="30" viewBox="0 0 20 20"
      onclick="this.classList.toggle('off')">
      <path d="M19.5 0.5 l-14 0 q-5 0 -5 5 l0 9 q0 5 5 5 l14 0 z" />
      <path d="M11.5 5 l-2 0 q-4 0 -4 4 l0 2 q0 4 4 4 l2 0 q4 0 4 -4 l0 -2 q0 -4 -4 -4" />
    </svg>
    <input class="text" type="textbox" placeholder="Branch..." />
    <button>Create</button>
  </div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  outline: none;
  font-family: Helvetica;
}

.tabs{
  padding: 5px 0;
  background: #333;
}

a:link, a:visited {
  padding: 5px 10px;
  color: white;
  user-select: none;
  text-decoration: none;
}

a.active{
  background: #555;
}

.content{
  background: #333;
  display: flex;
  padding: 20px;
}

.text{
  color: white;
  background: #555;
  font-size: 1em;
  border: 1px solid #333;
  font-weight: bold;
  border-right: none;
  padding-left: 10px;
}
  
button{
  font-size: 1em;
  padding: 0 10px;
  border-left: none;
  border: 1px solid #333;
  border-radius: 0 5px 5px 0;
  color: white;
  background: DodgerBlue;
}
  

svg path{
  fill: #555;
  stroke: DodgerBlue;
  stroke-width: 0;
}

svg path:last-child{
  fill: DodgerBlue;
  stroke-width: 0;
}
/*Active*/

svg:active path:last-child{
  fill: white;
}

/*open*/

svg.off path:last-child{
  fill: none;
}

svg:active path{
  fill: #888;
  stroke: #888;
}

JavaScript

var as = document.querySelectorAll("a")

as.forEach(a => {
      a.onclick = () => {
        as.forEach(a => a.classList.remove("active"))
        a.classList.toggle('active')
        }
      })