JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui open button">Open Left</div>
<div class="ui left vertical sidebar menu">
  <div class="item">
    <div class="ui input"><input type="text" placeholder="Search..."></div>
  </div>
  <div class="item">
    <i class="home icon"></i> Home
    <div class="menu">
      <a class="active item">Search</a>
      <a class="item">Add</a>
      <a class="item">Remove</a>
    </div>
  </div>
  <a class="item">
    <i class="grid layout icon"></i> Browse
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
  <div class="ui dropdown item">
    <i class="dropdown icon"></i>
    More
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>
</div>

CSS

.ui.sidebar {
    overflow: visible !important;
}

JavaScript

$('.ui.left.sidebar').sidebar({
    transition: 'overlay'
});
// left is opened by button
$('.ui.left.sidebar')
    .sidebar('attach events', '.open.button');
$('.ui .dropdown').dropdown();