JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headerbuttons" class="loggedin">
              
   <div tabindex="0" class="button user css-onclick-menu">
       <span class="username" title="TESTUSER">
           <div class="icon"></div>
           TESTUSER
       </span>
                  
     <ul class="css-onclick-content">
       <li tabindex="-1">
         <a href="/bookmark/check">add bookmark</a>
       </li>
       <li tabindex="-1">
         <a href="/user">my profile</a>
       </li>
       <li tabindex="-1">
         <a href="/ettutorials">tutorials</a>
       </li>
    </ul>
    
  </div>
</div>

CSS

.css-onclick-content {
    display: none;
    top: 9px;
}

JavaScript

(function ($) {
  "use strict";

  $(document).ready(function () {
    
    $('.css-onclick-menu .username').on('click', function() {
      toggleUserMenu($('.user .css-onclick-content'));
    });
    $('.button.user.css-onclick-menu').keypress(function (e) {
      let key = e.which;
      if(key == 13) {
        toggleUserMenu($('.user .css-onclick-content'));
      }
    });

    var toggleUserMenu = function($content) {
        if($content.css('display') == 'block') {
						$content.css('display', 'none');
        } else {
            $content.css('display', 'block');
        }
    }

  });
})(jQuery);