JSFiddle - React, Tailwind, and code Playground
by Daniele Manca
HTML
<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<form class="ui small form">
{{! Accordion sections }}
<div class="ui fluid accordion">
<div class="active title">
Payment details
<i class="dropdown icon"></i>
</div>
<div class="active content">
<div class="inline fields">
<div class="two wide field">
<label>Client ID:</label>
</div>
<div class="three wide field">
<input type="text" placeholder="99">
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>Debit account:</label>
</div>
<div class="three wide field">
<input type="text" placeholder="Daily account - 12345678821">
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>Value date:</label>
</div>
<div class="one wide field">
<select class="ui fluid dropdown">
<option value="">21</option>
<option value="1">22</option>
<option value="2">23</option>
<option value="3">24</option>
</select>
</div>
<div class="four wide field">
<select class="ui fluid dropdown">
<option value="">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
</div>
<div class="one wide field">
<input type="text" placeholder="2016">
</div>
</div>
<div class="inline fields">
<div class="two wide field">
<label>Currency:</label>
</div>
<div class="four wide field">
<select class="ui fluid dropdown">
<option value="">GBP</option>
<option value="1">EUR</option>
<option value="2">USD</option>
</select>
</div>
</div>
<div...
CSS
body {
padding: 1em;
}
JavaScript
$(".ui.dropdown").dropdown();