JSFiddle - React, Tailwind, and code Playground
by NesterOne
HTML
<link rel="stylesheet" href="http://build-master-fafj.jaspersoft.com/job/module-js-sdk-trunk-jade-new-css-html/ws/themes/default/jasper-ui/jasper-ui.css">
<div class="jr-mMultiselect jr-uWidth-350px jr">
<div class="jr-mMultiselect-toggleContainer jr">
<div class="jr-mMultiselect-toggle jr-mMultiselect-toggleAvailable jr-isActive jr" title="">
<span class="jr-mMultiselect-toggle-label jr" title="Available: #">Available: 12</span>
</div>
<div class="jr-mMultiselect-toggle jr-mMultiselect-toggleSelected jr-isInactive jr">
<span class="jr-mMultiselect-toggle-label jr" title="Selected: #">Selected: 5</span>
</div>
</div>
<div class="jr-mMultiselect-listContainer j-active jr" style="padding-top:26px;">
<div class="jr-mMultiselect-search jr">
<input class="jr-mInput-search jr" type="text" placeholder="Search list...">
</div>
<div class="jr-mMultiselect-list j-available-list jr" style="top:0; height:100%; padding-top:38px; padding-bottom:22px;">
<div class="jr-mScalablelist jr" draggable="false" ondragstart="return false" unselectable="on" onselectstart="return false" style="visibility: visible; display: block;">
<div class="j-view-port-chunk" style="height: 264px">
<ul style="position: relative; top: 0;" class="jr-mSelectlist jr">
<li title="January" data-index="0" class="jr-mSelectlist-item jr ">
<div class="jr-mSelectlist-item-wrapper jr">
<a class="jr-mSelectlist-item-text jr">January</a>
</div>
</li>
<li title="February" data-index="1" class="jr-mSelectlist-item jr jr-isHovered">
<div class="jr-mSelectlist-item-wrapper jr">
<a class="jr-mSelectlist-item-text jr">February - hovered</a>
...