JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div><a href='#' rel='popover' data-popover-content='#myPopover' data-placement='bottom'> Peoples </a></div>

<div id="myPopover" class="hide">
    <ul>
        <li>Person 1</li>
        <li>Person 2</li>
        <li>Other person</li>
    </ul>
    <a href='#'>Invite New Member</a>
</div>

CSS

/* .hide {
    visibility: hidden;
} */
#myPopover li {
    list-style-type: none;
    /* Убираем маркеры */
}
    
#myPopover ul {
    margin-left: 0;
     /* Отступ слева в браузере IE и Opera */
    padding-left: 0;
    /* Отступ слева в браузере Firefox, Safari, Chrome */
}

JavaScript

$.noConflict();
    $(function () {
        $('[rel="popover"]').popover({
            container: 'body',
            html: true,
            content: function () {
                var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
                return clone;
            }
        }).click(function (e) {
            e.preventDefault();
        });
    });