JSFiddle - React, Tailwind, and code Playground

by Stephen Irving

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<style>
    .upload{
       padding: 8px 10px;
       position: relative;        
       border-radius: 5px;
       width:100px;
    }
    .upload input[type="file"]{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }
    .opacity{
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
     -moz-opacity: 0;
     -khtml-opacity: 0;
     opacity: 0;
    }
    /*bootstrap*/    
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: whiteSmoke;
border: 1px solid #E3E3E3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
<div class="well">
    <a href="#" class="upload btn">
        <i class="icon-upload" style="padding-right: 5px"></i>
        Upload File
        <input type="file" class="opacity" /></a>
</div>