JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

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

    <div>more unnecessary stuff</div>
    
  <div>
    <nav class="navigation">
      <input type="checkbox" class="magic-checkbox" id="magic-kuku"/>
      <div id="kuku" tabindex="0" class="magic-target"> Cookoo text!</div>
    </nav>
</div>

</div>

CSS

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

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

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

.magic-checkbox, .magic-checkbox + .magic-target { display: none !important; }
.magic-checkbox:checked + .magic-target { display: block !important; }