{#css ui/Popover/Popover.css #}

<div class="bg-cover"
  style="background-image:linear-gradient(to right, rgba(217,70,239, 0.9), rgba(147,51,234, 0.9))"
  data-md-skip
></div>

<div id="pop-demo" data-md-skip>
  <PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>

  <Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
    <h1 data-outline-skip=>Edit Dimensions</h1>
    <fieldset class="space-y-2">
      <label>
        <span>Width</span>
        <input type="text" name="width" value="340px">
      </label>
      <label>
        <span>Height</span>
        <input type="text" name="height" value="25px">
      </label>
    </fieldset>
    <svg class="arrow" width="10" height="5" viewBox="0 0 30 10" aria-hidden="true">
      <polygon points="0,0 30,0 15,10"></polygon>
    </svg>
  </Popover>
</div>