JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section">  
<div class="item">
    <p class="toolbar">TOOLS</p>
    <p>content</p>
  </div>
  <div class="item">
    <p class="toolbar">TOOLS</p>
    <p>content</p>
  </div>
</div>

CSS

.toolbar { display: none; }
 .item { padding: 1px; } /* doesn't work without padding!

JavaScript

$("#section").on(
      "mouseenter",
      ".item",
      function(event) {
        $(this).children('.toolbar').show(100);
      }
    )

    $("#section").on(
      "mouseleave",
      ".item",
      function(event) {
        $(this).children('.toolbar').hide();
      });