JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="tab navbar" id="navbar">

  <div class="dropdown">
    <button class="dropbtn">Tag 1
            <i class="fa fa-caret-down"></i>
        </button>
    <div class="dropdown-content">
      <a class="tablinkDrop" href="#" onclick="openPage('gray')">Tag 1.1</a>
      <a class="tablinkDrop" href="#" onclick="openPage('gray')">Tag 1.2</a>
    </div>
  </div>
  <a href="#" class="tablink" onclick="openPage('gray')" id="defaultOpen">Tag 2</a>
  <a href="#" href="#" class="tablink" onclick="openPage('gray')">Tag 3</a>
  <a href="#" class="tablink" onclick="openPage('gray')">Tag 4</a>
  <a href="#" class="tablink" id="myBtn">Tag 5</a>
</div>

CSS

.navbar {
  background-color: #333;
  display: flex;
  flex-wrap: nowrap;
  cursor: pointer;
  overflow: auto;
  -ms-overflow-y: hidden;
  /*show horizontal scroll bar only*/
}

.navbar a {
  float: left;
  font-size: 20px;
  color: white;
  text-align: center;
  padding: 14px 50px;
  text-decoration: none;
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 50px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: lightblue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 60px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

JavaScript

function openPage(elmnt, color) {
  var i, tabcontent, tablinks;

  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  elmnt.style.backgroundColor = color;
}