JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/browser-image-compression/2.0.0/browser-image-compression.js"></script>
<button onclick="addImage()">
Click
</button>

CSS

.gp-imageupload-titleicon {
	color: blue;
	font-size: 52px;
}
#gp-imageupload-drop-area {
    position: relative;
	border: 4px dashed orange;
	overflow: hidden;
    margin-bottom: 10px;
    border-radius: 10px;
}
#gp-imageupload-drop-area .gp-imageupload-control-panel {
    position: absolute;
    bottom: 0;
    right: 0;
	font-size: 0px;
}
#gp-imageupload-drop-area .gp-imageupload-control-panel .item {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    background-color: #23232360;
}
#gp-imageupload-drop-area .gp-imageupload-control-panel .item span {
    color: orange;
	font-size: 32px;
}
#gp-imageupload-drop-area label {
	margin-bottom: 0;
    height: 100%;
    width: 100%;
    display: block;
    cursor: pointer;
    margin-left: auto;
}
#gp-imageupload-drop-area .uploadIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
	border: none;
    height: 100%;
	padding-top: 35px;
	padding-bottom: 35px;
}
#gp-imageupload-drop-area .uploadIcon .or {
	color: orange;
	font-weight: bold;
}
#gp-imageupload-drop-area .uploadIcon i {
	color: black;
	margin-bottom: 10px;
    width: 100%;
}
#gp-imageupload-drop-area .uploadIcon p {
	color: black;
	margin-bottom: 0px;
}
#gp-imageupload-drop-area .uploadIcon .last {
	color: black;
}
#gp-imageupload-drop-area.highlight {
	border-color: purple;
}
#gp-imageupload-gallery {
    height: 100%;
	min-height: 50px;
}
#gp-imageupload-gallery img {
	vertical-align: middle;
	max-height: 170px;
}
#gp-imageupload-fileElem {
	display: none;
}
#gp-imageupload-sendForm {
    width: 100%;
}
.gp-imageupload-areapaste {
    text-align: center;
}
input[id="gp-imageupload-text"]::placeholder {
    color: white;
    text-align: center;
}
input[id="gp-imageupload-text"]:focus-visible {
    outline-width: 0px;
    border-color: orange;
}
#gp-imageupload-sendForm .gp-imageupload-areapaste input {
    background: unset;
    border: 3px...

JavaScript

function addImage (image_type, game) {
  var confirmText = 'Submit';
  var cancelText = 'Cancel';
  var main_title = 'Title';
  Swal.fire({
    title: main_title,
    html:
    '<div class="gp-imageupload-box">' +
    '<form action="#" id="gp-imageupload-sendForm">' +
    '<div id="gp-imageupload-drop-area">' +
    '<label for="gp-imageupload-fileElem">' +
    '<input type="file" name="uploaded_image" id="gp-imageupload-fileElem" onchange="handleFiles(this.files)" />' +
    '<div class="uploadIcon">' +
    '<i class="fa fa-cloud-upload fa-4x" aria-hidden="true"></i>' +
    '<p>Paste Image <span class="or">or</span> Drag & Drop <span class="or">or</span> Click & Select</p>' +
    '<p class="last">Only jpeg, jpg and png</p>' +
    '</div>' +
    '<div id="gp-imageupload-gallery"></div>' +
    '</label>' +
    '<div class="gp-imageupload-control-panel">' +
    '<div class="item">' +
    '<div id="delete-image"><span class="material-symbols-outlined">delete_forever</span></div>' +
    '</div>' +
    '</div>' +
    '</div>' +
    '<div class="progress-wrapper">' +
    '<div class="progress-info">' +
    '<div class="progress-percentage">' +
    '<span class="text-sm font-weight-bold" id="gp-imageupload-progressbar-span">0%</span>' +
    '</div>' +
    '</div>' +
    '<div class="progress">' +
    '<div class="progress-bar bg-primary" id="gp-imageupload-progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
    '</div>' +
    '</div>' +
    '<div id="gp-imageupload-details_img">' +
    '<div class="list">' +
    '<div class="item">' +
    '<div class="attr">Name</div>' +
    '<div class="data" id="nameImage">No Data</div>' +
    '</div>' +
    '<div class="item">' +
    '<div class="attr">Size</div>' +
    '<div class="data" id="sizeImage">No Data</div>' +
    '</div>' +
    '<div class="item">' +
    '<div class="attr">Type</div>' +
    '<div class="data" id="typeImage">No Data</div>' +
    '</div>' +
   ...