JSFiddle - React, Tailwind, and code Playground

by Jack Lukic

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
<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">
<!-- normal button -->
<div class="ui inverted menu">
      <a class="active item">
        <i class="home icon"></i>
      </a>
      <a class="item notification" data-content="Notifications" data-variation="small inverted" data-position="bottom center">
        <i class="mail icon"></i>
      </a>
      <div class="tiny ui red buttons">
        <div class="ui button">Sign up for free</div>
        <div class="ui red floating dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu ui transition hidden">
            <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>
    </div>
<!-- right button menu -->
<div class="ui inverted menu">
      <a class="active item">
        <i class="home icon"></i>
      </a>
      <a class="item notification" data-content="Notifications" data-variation="small inverted" data-position="bottom center">
        <i class="mail icon"></i>
      </a>
      <div class="right menu">
        <div class="vertically fitted item">
            <div class="ui tiny red buttons">
              <div class="ui button">Sign up for free</div>
              <div class="ui floating dropdown icon button">
                <i class="dropdown icon"></i>
                <div class="menu ui transition hidden">
                  <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>
       ...

CSS

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

JavaScript

$('.ui.dropdown').dropdown();
$('.notification').popup('setting', 'transition', 'vertical flip');