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>
<div class="ui page grid">
<div class="column">
<h2 class="ui header">
<i class="circular file icon"></i>
<div class="content">
Elements
<div class="sub header">Choose elements to include</div>
</div>
</h2>
<table class="ui padded table segment celled piled">
<tbody>
<tr>
<td class="one wide">
<div class="ui checkbox">
<input type="checkbox" id="button" />
<label for="button"></label>
</div>
</td>
<td class="two wide"><b>Button</b></td>
<td>
<div class="ui labeled teal icon button"><i class="globe icon"></i>Button</div>
</td>
</tr>
<tr>
<td class="one wide">
<div class="ui checkbox">
<input type="checkbox" id="label" />
<label for="label"></label>
</div>
</td>
<td><b>Label</b></td>
<td>
<div class="ui label">label</div>
</td>
</tr>
<tr>
<td class="one wide">
<div class="ui checkbox">
<input type="checkbox" id="input" />
<label for="input"></label>
</div>
</td>
<td><b>Input</b></td>
<td>
<div class="ui icon input">
<input value="input">
<i class="search icon"></i>
</div>
</td>
</tr>
<tr>
<td class="one wide">
<div class="ui checkbox">
<input type="checkbox" id="loader" />
<label for="loader"></label>
</div>
</td>
...
CSS
html, body {
height: 100%;
}
html, body {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
JavaScript
// Add javascript here