JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui search selection dropdown" id="test">
<span class="text">Search Selection</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
</div>
</div>
<div class="ui selection dropdown" id="test2">
<span class="text">Selection</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
</div>
</div>
<div class="ui dropdown" id="test3">
<span class="text">Choose Category</span>
<i class="dropdown icon"></i>
<div class="menu">
<div...
JavaScript
$('#test')
.dropdown({
allowCategorySelection: true
});
$('#test2')
.dropdown({
allowCategorySelection: true
});
$('#test3')
.dropdown({
allowCategorySelection: true
});