JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

  <div id="apply" tabindex="0">
    Press to open cookoo
    <div class="inside">
      <div class="opener" tabindex="0">Open kuku from inside block</div>
    </div>
    <div>something else</div>
  </div>

    <div>more unnecessary stuff</div>
    
  <div>
    <nav class="navigation">
      <div id="kuku" tabindex="0"> Cookoo menu!
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
</div>

</div>

CSS

#apply {background:grey;}
#kuku {display:none;background:lightpink;}
.opener {background:tomato;}

#apply:focus ~ div #kuku, #kuku:hover, #kuku:focus {
  display:block;
}

.opener:focus ~ div #kuku, #kuku:hover, #kuku:focus,
#kuku:focus-within {
  display:block;
}