JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div>
    <a href="javascript:;" onclick="return hs.htmlExpand(this, {wrapperClassName: 'draggable-header', contentId: 'aaa'})" title="Popup Title">
        Open HTML-content
    </a>
    <div class="highslide-maincontent" id="aaa">
         <h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus.
    </div>

</div>

CSS

/* additional CSS - download the graphic file from the below url */
.draggable-header .highslide-header .highslide-close a {
    background-image: url(http://roadrash.no/hs-support/highslide/graphics/closeXtransp.png);
}
.draggable-header .highslide-header {
    background: #dddddd;
}
.draggable-header .highslide-html-content {
    padding: 0 0 5px 0;
}
.draggable-header .highslide-body {
    padding: 0 5px 0 5px;
}

JavaScript

// draggable & colored header with transparent X (close) graphic

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.headingEval = 'this.a.title';
hs.showCredits = false;