JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upload-form">
            <form action="" method="post" enctype="multipart/form-data">
                <div class="upload">
                    <input type="file" name="file-input">
                     <span class="input-filename">Select a file...</span>
                     <input type="button" value="Browse">
                </div>

                <input type="submit" name="submit" value="Upload">
                <span class="valid-formats">Valid input: .txt files &lt;= 512 KB</span>
            </form>
        </div>

CSS

.upload:hover input[type='button'],
.browse-hover {
    background: #9972ad; /* Old browsers */
    background: -moz-linear-gradient(top,  #9972ad 0%, #7a3e99 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9972ad), color-stop(100%,#7a3e99)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #9972ad 0%,#7a3e99 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #9972ad 0%,#7a3e99 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9972ad', endColorstr='#7a3e99',GradientType=0 ); /* IE6-8 */
}

.browse-active {
    background: red;
}