JSFiddle - React, Tailwind, and code Playground

by Jack Lukic

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
<i class="warning icon"></i> 

<br/><br/>


<div class="ui dropdown">
  <div class="text">Select</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">Edit</div>
    <div class="item">Remove</div>
    <div class="item">Hide</div>
  </div>
</div>

<br/><br/><br/>

<div class="ui teal buttons">
  <div class="ui button">Save</div>
  <div class="ui teal floating dropdown icon button">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item"><i class="edit icon"></i>Edit Post</div>
      <div class="item"><i class="delete icon"></i>Remove Post</div>
      <div class="item"><i class="hide icon"></i>Hide Post</div>
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

JavaScript

$('.ui.dropdown')
    .dropdown({
        action: 'updateForm',
        on: 'hover',
        delay: {show: 5000, hide: 3000}})
;