JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<div class="ui raised very padded text container segment">
<form class="ui form">
<h4 class="ui dividing header">Shipping Information</h4>
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="shipping[first-name]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="shipping[last-name]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Billing Address</label>
<div class="fields">
<div class="twelve wide field">
<input type="text" name="shipping[address]" placeholder="Street Address">
</div>
<div class="four wide field">
<input type="text" name="shipping[address-2]" placeholder="Apt #">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>State</label>
<select class="ui fluid dropdown">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</div>
<div class="field">
<label>Country</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="au"><i class="au flag"></i>Australia</div>
<div class="item"...
JavaScript
$('.dropdown').dropdown();
$('.ui.checkbox').checkbox();