<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/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>';
			},
		}
	}
)