<button class="sb-btn sb-btn--primary">Popover anchor (trigger)</button>
<div class="sb-modal sb-popover--open" role="dialog" aria-labelledby="popover-content" data-kss-animation-switch="sb-popover--open,sb-popover--close" data-kss-animation-name="Popover open/close">
  <div class="sb-popover__dialog" role="document">
    <div class="sb-popover__content sb-flex sb-flex-column sb-margin-top-xs" role="presentation" tabIndex="-1">
      <div class="sb-padding sb-popover__fade">
        <input class="sb-input" id="input-id-1" placeholder="Placeholder Text">
      </div>
      <div class="sb-popover__animate-content sb-overflow-y-auto">
        <span class="sb-block sb-text--smallcaps sb-padding-bottom-s sb-padding-left sb-padding-right sb-border-bottom-light-3">Form origin</span>
        <ul role="menu" class="sb-table-list sb-table-list--borderless">
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 1 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 2 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 3 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 4 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 5 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 6 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 7 </li>
        </ul>
        <span class="sb-block sb-text--smallcaps sb-padding-top sb-padding-bottom-s sb-padding-left sb-padding-right sb-border-bottom-light-3">Form origin</span>
        <ul role="menu" class="sb-table-list sb-table-list--borderless">
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 1 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 2 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 3 </li>
          <li role="menuitem" tabIndex="0" class="sb-table-list__item sb-padding-top-s sb-padding-bottom-s sb-padding-left sb-padding-right"> Element 4 </li>
        </ul>
      </div>
    </div>
  </div>
</div>