JSFiddle - React, Tailwind, and code Playground

by web_developer_888

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
 <div id="upload" >
<form action='http://test' method='post' accept-charset='utf-8' class='form-horizontal'enctype='multipart/form-data' style='text-align:center;'>
 </br>
<div class='control-group'>
   <input type='file' name='userfile' value='' id='userfile' class='btn btn-primary' required='true' style=' width:290px;' />
   </br>
   </br>
   <label  for='name'>Name</label>
   <input type='text' name='associateName' value='' id='name' required='required' placeholder='Name'  />
   
       
   </div>
   <div class='control-group'>
       <label  for='dept'>Department Name   </label>
       <input type='text' name='dept' value='' id='dept' required='required' placeholder='Department Name'  />
        </br>
        <input id='startDateUpload' name='startDateUpload' value='" + $.datepicker.formatDate(dateFormat, startDate, inst.settings) + "' type='hidden' />
         <input id='endDateUpload' name='endDateUpload' value='" + $.datepicker.formatDate(dateFormat, endDate, inst.settings) + "' type='hidden' />
        <input id='seg' name='seg' value='0' type='hidden' />
        <input id='total' name='total'  type='hidden' />
    </div>
    <input  type='submit'  name='upload' value='Upload' id='upload' class='con btn btn-primary'  />
</form> 
</div>

CSS

#upload{
    width: 40%;
    height: 40%;
    margin-right: auto;
    margin-left: auto;
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));*/
   background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(90%, #f2f2f2));
    box-shadow: 10px 10px 5px #888888;border: 2px solid #d6d6d6;
}