JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profiles"> <a class="open" href="#">
        <img src="/../.jpg" / class="img-full"></a>

    <div class="dialog" title="Basic modal dialog">
        <p><strong>Some Text</strong>

        </p>
        <p> <strong>Phone</strong>: *********
            <br /> <strong>Email</strong>: <a href="mailto:[email protected]">SomeEmail</a>

        </p>
    </div>
</div>
<div class="profiles"> <a class="open" href="#">
        <img src="/../.jpg" / class="img-full"></a>

    <div class="dialog" title="Basic modal dialog">
        <p><strong>Some Text</strong>

        </p>
        <p> <strong>Phone</strong>: *********
            <br /> <strong>Email</strong>: <a href="mailto:[email protected]">SomeEmail</a>

        </p>
    </div>
</div>

CSS

.dialog {
    display:none;
}

JavaScript

$(".open").click(function () {
        var div = $(this).next("div.dialog");
        var dia = $(div).dialog({
            draggable: false,
            position: "center",
            width: "300px",
            modal: true,
            title: "",
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                    $(this).dialog( "destroy");
                }
            }
        });
    });