JSFiddle - React, Tailwind, and code Playground

sampling dropify library (drag and drop a file into a beautified input field)

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/css/dropify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/fonts/dropify.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/fonts/dropify.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/fonts/dropify.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/fonts/dropify.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.1/js/dropify.min.js"></script>
<form>

    <p><label for="file1">Dropify with height of 300px</label></p>
    <input name="file1" type="file" class="dropify" data-height="300" />

    <p><label for="file2">Dropify with height of 300px with maximum 2K file size</label></p>
    <input name="file2" type="file" class="dropify" data-height="300" data-max-file-size="2K" />
    
    <p><label for="file3">Dropify with height of 100px accepting only PDF or PNG or PSD file</label></p>
    <input name="file3" type="file" class="dropify" data-height="100" data-allowed-file-extensions="pdf png psd" />

</form>

CSS

body {
    font-family: "Lucida Console", "Courier New", monospace
}

JavaScript

$('.dropify').dropify();
// configuration happens in the HTML using data-* attributes