JSFiddle - React, Tailwind, and code Playground
HTML
<div class="modal-body">
<!-- test for NEW CONTENT AREA -->
<div class="row">
<div class="col-sm-4">
<h6 class="section-header">username*</h6>
<input align="middle" class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h6 class="section-header">firstname*</h6>
<input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
</div>
<div class="col-sm-4">
<h6 class="section-header">lastname*</h6>
<input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h6 class="section-header">password*</h6>
<input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
</div>
<div class="col-sm-4">
<h6 class="section-header">confirm password*</h6>
<input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
</div>
</div>
<br/>
<div class="row">
<div class="col-sm-4">
<img src="/img/siloutte.png" align="middle" alt="add image" width="110px" height="80px" />
<input type="file" name="pic" accept="image/gif, image/jpeg, image/png">
...
CSS
.modal-body{
text-align:center;
}