<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
          
<div class="wrapper">
  <select data-rich-select multiple>
    <option value="">選択してください</option>
    <optgroup label="フロントエンド">
      <option data-description="HyperText Markup Language" data-color="#e54d26" data-devicon-class="devicon-html5-plain-wordmark colored" value="html">HTML</option>
      <option data-description="Cascading Style Sheets" data-color="#3d8fc6" data-devicon-class="devicon-css3-plain-wordmark colored" value="css">CSS</option>
      <option data-description="just-in-time compiled language" data-color="#f0db4f" data-devicon-class="devicon-javascript-plain colored" value="javascript">JavaScript</option>
      <option data-description="TypeScript is a superset of JavaScript" data-color="#007acc" data-devicon-class="devicon-typescript-plain colored" value="typescript">TypeScript</option>
    </optgroup>
    <optgroup label="バックエンド">
      <option data-description="Node.js is a back-end JavaScript runtime environment" data-color="#83cd29" data-devicon-class="devicon-nodejs-plain-wordmark colored" value="nodejs">Node JS</option>
      <option data-description="PHP: Hypertext Preprocessor" data-color="#6181b6" data-devicon-class="devicon-php-plain colored" value="php">PHP</option>
    </optgroup>
  </select>
</div>

.wrapper {
  margin: 3rem;
}

.callback {
  margin: 3rem;
  padding: 1rem;
  border: 1px dotted #333;
}

.callback p {
  margin: 0 0 .25rem;
}

.ts-dropdown .option {
  padding: .75rem 1.5rem; 
}

.option i {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 1rem;
}

.ts-wrapper.multi .ts-control > div {
  padding: .5rem 1rem;
  aligin-items: center;
}

.item i {
  font-size: 1.25rem;
  margin-right: .5rem;
}
.item span {
  font-size: 1.125rem;
}

.item-inner {
  display: inline-flex;
  align-items: center;
}

.description {
  display: block;
  font-size: .75rem;
  color: #aaa;
}

new TomSelect(
  '[data-rich-select]',
  {
    create: true,
    render: {
      option: function( data, escape ) {
        return '<div><div class="item-inner">' +
          `<i class="${ escape( data.deviconClass ) }"></i>` + 
          '<span>' + escape( data.text ) + '</span></div>' +
          '<span class="description">' + escape( data.description ) + '</span>' +
          '</div>';
      },
      item: function( data, escape ) {
        return '<div>' +
          `<i class="${ escape( data.deviconClass ) }"></i>` + 
          `<span style="color: ${ escape( data.color ) }">${ escape( data.text ) }</span>` +
          '</div>';
      },
    }
  }
)