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 text!</div>
    </nav>
</div>

</div>

CSS

#apply {background:grey;}
#kuku {display:none;background:yellow;}
.opener {background:pink;}

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

.opener:focus ~ div #kuku, #kuku:hover, #kuku:focus {
  background: magenta;
  display:block;
}