JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="andi.css" />
    <link type="text/css" href="js2/before-after.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

</head>

<body>

    <button style=" position: absolute; left: 0px; background-color: gray" id="opener">Open Dialog</button>


    <div class="container1" id="dialog1" hidden="hidden">
        <iframe class="responsive-iframe1" src="https://tviot.slika-ins.co.il/negishut.html"></iframe>
    </div>







    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="js2/before-after.min.js"></script>
    <script type="text/javascript" src="js2/andifn1.js"></script>
    <script src="https://system.user-a.co.il/Customers/551189819/_www_infocar_co_il-/andifn1.js" id="andipath"></script>
</body>
</html>

CSS

.container1 {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 75%;  
}

.responsive-iframe1 {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/*heavy workaround*/
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
  width: 90% !important;
  left: 5% !important;
}

JavaScript

$(function () {
	$("#dialog1").dialog({
		autoOpen: false,		
		width: 500,
		height: 300,
		position: { my: 'top', at: 'top+20' },
	});
	$("#opener").click(function () {
		$("#dialog1").dialog('open');
		$(".ui-dialog-titlebar").removeClass('ui-widget-header');
		//$(".ui-dialog-titlebar").hide();
	});
});