JSFiddle - React, Tailwind, and code Playground

by filepicker

HTML

<script src="http://api.localhost.com:5000/v0/filepicker.js"></script>
<input type="filepicker" 
data-fp-text="Just Images" 
data-fp-mimetypes="image/*" 
data-fp-option-multiple="false" 
data-fp-option-modal="true" 
name="open"/>

<hr >

<input type="filepicker" 
data-fp-text="Just Facebook" 
data-fp-option-multiple="false" 
data-fp-option-modal="true" 
data-fp-option-services="FACEBOOK" 
name="openFacebook"/>

<hr >

<input type="filepicker-dragdrop"
data-fp-button-text="Pick a file"
data-fp-drag-text="Or even drop something here"
data-fp-mimetypes="text/plain"
data-fp-option-modal="true"
name="dragDrop"/>

<hr >

<button 
data-fp-mimetype="image/png" 
data-fp-url="http://www.filepicker.io/st/success.png"
data-fp-option-modal="true"
>Save File</button>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button {
    margin: 30px 0 30px 10px;
    display: inline-block;
    padding: 4px 10px 4px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer
    background-color: #05C;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: white;
    background-color: #0074CC;
    background-image: -moz-linear-gradient(top, #08C, #05C);
    background-image: -ms-linear-gradient(top, #08C, #05C);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#05C));
    background-image: -webkit-linear-gradient(top, #08C, #05C);
    background-image: -o-linear-gradient(top, #08C, #05C);
    background-image: linear-gradient(top, #08C, #05C);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
    border-color: #05C #05C #003580;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

JavaScript

filepicker.setKey("GET_A_FILEPICKER_APIKEY_AT_FILEPICKER.IO");