JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<div id='container'>
    <p id='drag-here'><span>Drag Files Here</span>
    </p>
</div>
<form>
    <input type='file' id='upload-file'></input>
    <input type='submit'></input>
</form>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,400italic,500,700,700italic,900);

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Roboto, Helvetica Neue, Sans-Serif;
    font-weight: 500;
}

#container {
    width: 80vw;
    height: 80vh;
    border: 10px dashed #444;
    margin: 10vh auto;
}

#container:hover {
    background-color: #eee;
    cursor: pointer;
}

#drag-here {
    text-align: center;
    margin: 40vh 0; /* the center of an 80vh box */
}

#upload-file {
    display: none;
}

JavaScript

$("#container").click(function () {
    $("#upload-file").click();
});