JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/pdf-lib@1.4.0"></script> 
    <script src="https://unpkg.com/downloadjs@1.4.7"></script>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  </head>

  
  
  <body>
    <div class="list-files">
          <div class="no-files">No PDF files added</div>
    </div>
    <div style="display:none">
      <input type="file" id="pdf-file" accept="application/pdf">
    </div>
    <div class="center-btn">
      <button class="btn-join" onclick="$('#pdf-file').click()">ADD PDF</button>     
      <button class="btn-join" onclick="joinPdf()">JOIN PDF</button>
       
    </div>
  </body>

</html>

CSS

.list-files {
	border: 3px dashed lightgrey;
	min-height: 160px;
	height: auto;
	padding-bottom: 20px;
	border-radius: 15px;
}

.btn-join {
	background: #C21938;
	color: white;
	border: none;
	padding: 10px;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
}

.center-btn {
	text-align: center;
	width: 100%;
	padding-top: 25px
}

.no-files {
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	padding-top: 65px
}

.pdf-file {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
	text-transform: uppercase;
	width: 46%;
	margin: 2%;
	margin-bottom: 0px;
	border: 1px solid lightgrey;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	overflow: hidden;
}

.btn-remove {
	cursor: pointer;
	width: 30px;
	height: 30px;
	background: #c21938;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	margin: 5px;
	padding-top: 4px;
	text-align: center;
	border-radius: 50%;
	right: 0;
}

JavaScript

const {
    PDFDocument
} = PDFLib
var pdfImage =...