JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<div id='greet'>
<p>
How are you?
</p>

</div>
<div id='script'>


</div>

CSS

#script{
  overflow: hidden;
  height: calc(100% - 300px) !important;
  padding-bottom: 70px;
  position: relative !important;
}

 #script .swal-height {
        position:absolute !important;
    }

JavaScript

var id = document.getElementById('script');
  Swal.fire({
    title: "SweetAlert",
    html:"<div id='controls'><button class='button small-3' id='button1' disabled>Button1</button></div><br><br><h3>Hello</h3><ol id='list'></ol><br/><br/><button class='button small-2' id='Button2' disabled>Done</button>",
    showConfirmButton: true,
    showCloseButton: true,
    allowOutsideClick: false,
    allowEscapeKey : false,
    customClass: "swal-height",
    target: id
	});