JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="dropdown-menus">
  <div id="section1-drop" class="drop-section hidden-panel">
    <ul>
    
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    </ul>
    <div><a href="#">Link 3</a></div>
  </div>

  <div id="section2-drop" class="drop-section hidden-panel">
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
  <div id="section3-drop" class="drop-section hidden-panel">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </div>

  <div id="section4-drop" class="drop-section hidden-panel">
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div id="section5-drop" class="drop-section hidden-panel">
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
</div>

<ul id="dropdown-links" class="menu main-tabs">
  <li>
    <a class="panel-btn" data-section="section1-drop" href="#" id="drop-link-section1">section 1</a>
  </li>
  <li>
    <a class="panel-btn" data-section="section2-drop" href="#" id="drop-link-section2">section 2</a>
  </li>
  <li>
    <a class="panel-btn" data-section="section3-drop" href="#" id="drop-link-section3">section 3</a>
  </li>
  <li>
    <a class="panel-btn" data-section="section4-drop" href="#" id="drop-link-section4">section 4</a>
  </li>
  <li>
    <a class="panel-btn" data-section="section5-drop" href="#" id="drop-link-section5">section 5</a>
  </li>
</ul>

CSS

.hidden-panel {display:none;}

JavaScript

var TAB_KEY = 9;

$(function() {

  // Setup the focus handler for the root links
	$('.panel-btn').on('click', function(e) {
    var link = $(this);
    var section = link.attr('data-section');
    
    // Pass in the current link and the section name to dropMenu
    dropMenu($(this), section);
  });
  
  // Setup a keydown handler to handle tabbing on section links
  $('.drop-section').on('keydown', 'a', function(e) {
  	if(e.keyCode === TAB_KEY) {
      var link = $(this);
      
      // Flag determins whether to prevent default tab behaviour
      var preventDef = false;
      
      // Travel to previous link on SHIFT + TAB
      if(e.shiftKey) {
        preventDef = travelPrevious(link);
      }
      
      // Travel to next link on TAB
      else {
        preventDef = travelNext(link);
      }
      
      // Prevent default focus behaviour
      if(preventDef) {
        e.preventDefault();
      }
    }
  });
});

// Handles travelling to the next link
function travelNext(link) {
  var next = link.next();
  
  if(next.length > 0) {
    // Continue with default behaviour of moving to next link
  	return false;
  }
  
  // Drop section parent ID
  var parentId = link.parents('.drop-section').attr('id');
  
  // Root link whose data-section attribute matches parent ID
  var rootLink = $('.panel-btn[data-section=' + parentId + ']').parent();
        
  // Next root link to move to.
  var nextLink = rootLink.next().find('a');
        
  // Focus on the next root link, which will fire dropMenu for 
  // the next section.
  nextLink.focus();
  
  // Prevent default behaviour
  return true;
}

function travelPrevious(link) {
  var prev = link.prev();
  
  if(prev.length > 0) {
    // Continue with default behaviour of moving to previous link
  	return false;
  }
  
  // Drop section parent ID
  var parentId = link.parents('.drop-section').attr('id');
  
  // LI container for Root link whose data-section attribute matches parent ID
  var rootLink =...