JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation-bar">

  <div class="navigation-bar-right-inset">

    <li class="navigation-bar-right"> <span class="settings"> <a href="#"> <img class="#" src="/assets/settings.svg"> </a> </span>
      <ul class="dropdown">
        <li>
          <%= link_to "sign out", destroy_user_session_url, method: :delete %>
        </li>
        <li>
          <%= link_to "profile", edit_user_registration_path %>
        </li>
      </ul>
    </li>

  </div>

</ul>

CSS

.navigation-bar {
  width: 100%;
  top: 0;
  position: fixed;
  z-index: 1050;
  list-style-type: none;
  /*overflow: hidden;*/
  background-color: rgb(251, 251, 251);
  border-bottom: 1px solid #FFF;
}

.navigation-bar-right-inset {
  margin-right: 9%;
}

.navigation-bar-right {
  float: right;
}

.navigation-bar-right .settings img {
  height: 65px;
  margin-top: -5px;
  opacity: 0.3;
}

.navigation-bar-right .settings img:hover {
  opacity: 0.5
}

ul li .dropdown {
  display: none;
  position: absolute;
  width: auto;
  top: 50px;
  right: 0;
}

ul li:hover .dropdown {
  display: block
}