JSFiddle - React, Tailwind, and code Playground

by Quan Tran

HTML

<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css">
<div class="ui dropdown button">
  <span class="text">Choose Category</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>
    </div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.ui.dropdown').dropdown({
    allowCategorySelection: true,
    on: 'click',
    action: 'nothing'
});