JSFiddle - React, Tailwind, and code Playground

HTML

<div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
      <ul>
        <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
        <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
        <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
        <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
        <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.button-group {
  display: inline-block;
}
.button {
  background: lightblue;
  border: 1px solid darkblue;
  padding: 5px 10px;
  display: inline-block;
  cursor: default;
}
.dropdown-body {
  position: absolute;
  border: 1px solid #ddd;
  min-width: 100px;
  box-shadow: 1px 1px 15px 0px #f0f0f0;
  border-radius: 3px;
  padding: 3px 0px;
  background-color: #fff;
  left: auto;
  right: 0;
  /* Align to Right by default */
}
.dropdown-body .dropdown-menu-item {
  padding: 5px;
  cursor: default;
  display: block;
  text-decoration: none;
  color: #333;
}
.dropdown-body .dropdown-menu-item:hover, a:hover, a:focus, a:active{
  background-color: #08c;
  color: #fff;
}
.dropdown {
  position: relative;
}
.dropdown.dropdown-left .dropdown-body {
  right: auto;
  left: 0;
}
.dropdown .dropdown-body {
  display: none;
}
.dropdown.shown .dropdown-body {
  display: block;
}




/** added **/
hr{display:block; margin-bottom:2em}



nav{}

ul{list-style-type:none}
ul,li,a{margin:0; padding:0}
a{color:#000; text-decoration:none}
ul a:hover,ul a:active, ul a:focus{cursor:pointer}

JavaScript

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});