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 vertical inverted sidebar menu left overlay visible">
<div class="item">
<a class="ui logo icon image" href="/"><img src=
"http://placehold.it/40/cc095c/000000"></a> <a href="/" style=
"font-weight: bold">Acme Inc.</a><br>
<br>
<div class="ui vertical fluid accordion inverted menu">
<h4 class="ui dividing inverted header">Content Menu</h4>
<div class="item">
<a class="active title"><i class="dropdown icon" tabindex=
"0"></i> Entry</a>
<div class="active content">
<form class="ui inverted form" method="post">
<div class="grouped fields">
<div class='ui content labeled field'>
<label>Group</label>
<select class="ui fluid dropdown select" id="test1" name="test"><option value="">Select...</option><option value="1">Global</option></select>
</div>
<div class='ui content labeled field'>
<label>Type</label>
<select class="ui fluid dropdown select" id="test2" name="test2"><option value="">Select...</option><option value="1">Text</option>
<option value="2">String</option>
<option value="3">Boolean</option></select>
</div>
<div class='ui content labeled field'>
<button class="right floated tiny right labeled blue ui icon button" name="Commit" type="submit" value="Add">Add
<i class='add circle icon'></i>
</button>
</div>
</div><!-- end grouped fields-->
</form>
</div>
...
CSS
body {
padding: 1em;
}
JavaScript
// Add javascript here
$('.ui.accordion').accordion();
$('.dropdown').dropdown();