JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxpanel' style="font-size: 13px; font-family: Verdana; float: left;">
  <div style='margin: 10px;'>
    <h3>Early History of the Internet</h3></div>
  <!--Content-->
  <div style='white-space: nowrap;'>
    <p>
      some content 
    </p>
    <div id='jqxdropdownlist'></div>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
    <p>
      some content 
    </p>
  </div>
</div>

JavaScript

$(document).ready(function () {
  // Create jqxPanel
  $("#jqxpanel").jqxPanel({ width: 250, height: 250});
  var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Breve",
    "Café Bombón",
    "Café au lait",
    "Caffé Corretto",
    "Café Crema",
    "Caffé Latte",
  ];
  // Create a jqxDropDownList
  $("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 0, width: '200px', height: '25px' });
  // disable the sixth item.
  $("#jqxdropdownlist").jqxDropDownList('disableAt', 5);
  // bind to 'select' event.
  $('#jqxdropdownlist').bind('select', function (event) {
    var args = event.args;
    var item = $('#jqxdropdownlist').jqxDropDownList('getItem', args.index);
    alert('Selected: ' + item.label);
  });
});