JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div id="form-wrapper">
    <form method="post" enctype="multipart/form-data" action="">
        <h3 class="space-below">File Upload</h3>
        <div id="form-elements" class="space-above">
        <label for="file_upload">Select File: </label>
        <input type="file" name="file_upload" />
        <input type="submit" name="submit" id="upload-submit" value="Upload" />
        </div>
        <div class="progress-wrapper">
            <span class="progress-bar"></span>
        </div>
        &nbsp;
    </form>
</div>

CSS

#form-wrapper{
    display: block;
    margin: 0px auto;
    border: solid 1px #000000;
    border-radius: 8px;
    padding: 3px;
    min-height: 110px;
    max-height: 150px;
    width: 80%;
}
#form-wrapper H3
{
   margin: 0px;
   padding: 1px;
   margin-top: 0px; 
   margin: 0px auto;
   display: block;
   width: 99%;
   text-align: center;
   border: solid 1px #000000;
   background-color: #88abab;
   border-radius: 6px;
}
.space-below {
    margin-bottom: 10px;
}
.space-above {
    margin-top: 10px;
}
#form-wrapper LABEL {
    display: block;
    float: left;
}
#form-wrapper INPUT{
    display: block;
    float: left;
    clear: right;
}
#form-wrapper INPUT[type='file'] {
    min-height: 20px;
}
#form-wrapper INPUT[type='submit'] {
    float: left;
    clear: both;
}