JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/javascript/semantic.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.css">
<div class="ui checkbox">
    <input type="checkbox"/>
    <label>Hello</label>
</div>

<div class="ui blue labeled dropdown button pointing top left">
  <input name="gender" type="hidden">
  <div class=" text">Gender</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>
    
    
    <div class="ui blue labeled icon top left pointing dropdown button">
  <i class="settings icon"></i>
  <span class="text">Settings</span>
  <div class="menu">
    <div class="item"><i class="edit icon"></i>Edit</div>
    <div class="item"><i class="delete icon"></i>Remove</div>
    <div class="item"><i class="hide icon"></i>Hide</div>
  </div>
</div>
<div class="ui red labeled icon top right pointing dropdown button">
  <i class="settings icon"></i>
  <span class="text">Settings</span>
  <div class="menu">
    <div class="item"><i class="edit icon"></i>Edit</div>
    <div class="item"><i class="delete icon"></i>Remove</div>
    <div class="item"><i class="hide icon"></i>Hide</div>
  </div>
</div>

CSS

body {
    font-family: Open Sans;
    font-size: 14px;
}

JavaScript

$('.ui.checkbox')
  .checkbox()
;

$('.ui.dropdown')
  .dropdown()
;