JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
  integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

<script
  crossorigin="anonymous"
  integrity="sha512-v80Z62SYCVHA3UxmFG69Vclopt+3ngQDocRjtxnB3htcTs6l9mnXc6SixuDae1rJ3L2J6p2KAuG+soHbhVd+6g=="
  referrerpolicy="no-referrer"
  src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"
></script>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<link
  crossorigin="anonymous"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
  integrity="sha512-hfp7UiPWaDAND/ZE+RrbMpthca5iYNxJl/uWQTOqeZqur4C6Y/kiDUsBKoUeQTvyz6EJFyDrtPefVpidGFzk+Q=="
  referrerpolicy="no-referrer"
  rel="stylesheet"
/>

<div class="container">
  <button id="Uploads" title="Upload a new file" onclick="UploadBox()">
    Upload Files
  </button>
</div>

<script>
  function UploadBox() {
    // date
    Fancybox.show(
      '<input id="fileupload" type="file" name="fileupload"><br><button id="upload-button" onclick="uploadFile()"> Upload </button>',
    )
    //
    //$.fancybox.open('<form><input type=\"file\" name=\"fileToUpload\" id=\"fileToUpload\"><br><input type=\"submit\" onclick="FileUploadBox()" value=\"Upload File\" name=\"submit\" style="width: 100%;margin: 25px auto;"></form>');
 ...