JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.2.5/tippy.min.css">
<div class="bar">
  <div class="button button1">
    click me!
    
    <div id="menu-content">
      this is a tippy!
    </div>
    
  </div>
  
  <div class="button2 button">
    click me!
    
    <div id="menu2-content">
      this is another tippy!
    </div>
  </div>
  
</div>

CSS

body {
  margin: 0;
}
.bar {
  height: 100px;
  width: 100%;
  background: coral;
  display: flex;
}

.button {
  background: aquamarine;
  height: 100%;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button2 {
  margin-left: 20px;
}

JavaScript

const menu = document.getElementById("menu-content");
menu.style.display = 'block';
tippy('.button1',
{
	content: menu,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
  hideOnClick: 'toggle',
  placement: 'bottom-start',
  offset: [0, 0],
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 0]
        }
      },
      {
        name: 'flip',
        options: {
          padding: 0,
          flipVariations: false
        }
      }
    ]
  },
});

const menu2 = document.getElementById("menu2-content");
menu2.style.display = 'block';
tippy('.button2',
{
	content: menu2,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
  hideOnClick: 'toggle',
  placement: 'bottom-start',
  offset: [0, 0],
  popperOptions: {
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 0]
        }
      },
      {
        name: 'flip',
        options: {
          padding: 0,
          flipVariations: false
        }
      }
    ]
  },
});