JSFiddle - React, Tailwind, and code Playground
by Dhanck
HTML
<form class="form-horizontal">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Schedule Name">Schedule Name</label>
<div class="col-md-6">
<input id="Schedule Name" name="Schedule Name" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Button Drop Down -->
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">Schedule Type</label>
<div class="col-md-6">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="Manual" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Option one</a></li>
<li><a href="#">Option two</a></li>
<li><a href="#">Option three</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Button Drop Down -->
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">Escalation</label>
<div class="col-md-6">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="Default" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Option one</a></li>
<li><a href="#">Option two</a></li>
<li><a href="#">Option three</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Schedule Group</label>
<div class="col-md-5">
<select id="selectbasic"...
CSS
body{
margin:30px;
}
.form-group {
margin-bottom: 5px;
}