JSFiddle - React, Tailwind, and code Playground

by needlethread

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">
<button class="ui small button" role="button">
  <div role="listbox" class="ui dropdown">
    <div class="text" role="alert">Fails - click here with Firefox</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div role="option" class="selected item">Cake</div>
      <div role="option" class="item">Candy</div>
      <div role="option" class="item">Snails</div>
    </div>
  </div>
</button>

<div class="ui dropdown">
  <div class="text">Works</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">New</div>
    <div class="item">
      <span class="description">ctrl + o</span>
      Open...
    </div>
    <div class="item">
      <span class="description">ctrl + s</span>
      Save as...
    </div>
    <div class="item">
      <span class="description">ctrl + r</span>
      Rename
    </div>
    <div class="item">Make a copy</div>
    <div class="item">
      <i class="folder icon"></i>
      Move to folder
    </div>
    <div class="item">
      <i class="trash icon"></i>
      Move to trash
    </div>
    <div class="divider"></div>
    <div class="item">Download As...</div>
    <div class="item">
      <i class="dropdown icon"></i>
      Publish To Web
      <div class="menu">
        <div class="item">Google Docs</div>
        <div class="item">Google Drive</div>
        <div class="item">Dropbox</div>
        <div class="item">Adobe Creative Cloud</div>
        <div class="item">Private FTP</div>
        <div class="item">Another Service...</div>
      </div>
    </div>
    <div class="item">E-mail Collaborators</div>
  </div>
</div>

CSS

body {
  padding: 1em;
}

JavaScript

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