JSFiddle - React, Tailwind, and code Playground

by JamesPattison

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
<select id="sel" class="js-example-basic-single" name="state">

</select>

CSS

.js-example-basic-single{
  width:750px;
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: .2em .4em;
    line-height: 1.5;
    zoom: 1;
}

.ui-combobox-option-description {
    font-size: 70%;
    font-style: italic;
    white-space: nowrap;
}

JavaScript

$(document).ready(function() {
  var output = [];

  for(i = 0; i < 10; i++){
		output[i] ='<option value="'+ i +'">'+ i +'</option>';
  }

  $('#sel').html(output.join(''));

	$('.js-example-basic-single').selectize({
  render: {
        option: function(item, escape) {
            return `
<div class="ui-combobox-option-label ui-menu-item">     
<img src="img/misc/operation20.png"> <span>Approval Requests - Control - Cancel</span><br >
  <span class="ui-combobox-option-description">Occurs when a user cancels an Approval Request/Job</span>
<div>`;
        }
    }
  });
});