JSFiddle - React, Tailwind, and code Playground
by Dhanck
HTML
<form class="form-horizontal rhs-entity">
<div class="top10"></div>
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-3 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-9">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3 control-label" for="textinput">Calendar</label>
<div class="col-md-9">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3 control-label" for="textinput">Date</label>
<div class="col-md-9">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3 control-label" for="textinput">Filter Drop down</label>
<div class="col-md-9">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-3 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-9">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
...
CSS
form{
font-size:12px;
}
.rhs-entity {
background-color: #337ab7;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 10px;
color: white;
font-family: century gothic;
}
.btn-group-wrap {
text-align: center;
}
.btn-group {
margin: 0 auto;
text-align: center;
width: inherit;
display: inline-block;
}
.rhs-entity .form-control {
height: 26px;
padding: 0px 8px;
font-size: 12px;
line-height: 22px;
}
.rhs-entity .form-group {
margin-bottom: 10px!important;
}
#topPriorityRadioId input, #highPriorityRadioId input, #mediumPriorityRadioId input, #lowPriorityRadioId input, #buttomPriorityRadioId input {
float: left;
margin: 2px 5px;
}