JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div class="navbar-ore">
  <div class="dropdown-ore">
    <button class="dropbtn-ore">Dropdown 
      <i></i>
    </button>
    <div class="dropdown-content-ore">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="dropdown-ore">
    <button class="dropbtn-ore">Dropdown 2
      <i class="fa fa-caret-down-ore"></i>
    </button>
    <div class="dropdown-content-ore">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

CSS

.navbar-ore {
  overflow: hidden;
 
}

.navbar-ore a {
  float: left;
  font-size: 16px;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown-ore {
  float: left;
  overflow: hidden;
}

.dropdown-ore .dropbtn-ore {
  font-size: 16px;  
  border: none;
  outline: none;
  color: #000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content-ore {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
  background-color:#ccc;
}

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

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

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