JSFiddle - React, Tailwind, and code Playground

HTML

<?php
/**************************
**************************/
header('Content-Type: image/png');

//include lib
include "../../phpqrcode/qrlib.php";

session_start();
$hostname="localhost";
$username="root";
$password="";
$database="";
		
try {  
	# MySQL with PDO_MYSQL  
	$DBH = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);  
	$DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
		  
}  
catch(PDOException $e) { 
	echo "I'm sorry, I'm afraid I can't do that.";  
	file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);   
}

?>
<script type="text/javascript">
$(document).ready(function () {
	turnOnActive();
});
//this function will turn user activePayment to 1 equaling on
function turnOnActive()
{
	$.ajax({
			type: "POST",
			dataType: "json",
			url: '../member/qr-functions/turnActive.php',
			data: {
			},
			success: function(){
			}
	});
}
		function closeDialogBox()
		{
			$.ajax({
			type: "POST",
			dataType: "json",
			url: '../member/qr-functions/turnActiveOff.php',
			data: {
			},
			success: function(){
				var i;
				$("#dialog-container").effect( 'fade', 500 );
				
				i = setInterval(function(){
				$("#dialog-container").dialog( 'close' );
				clearInterval(i);
				}, 500);
			}
			});
		}
</script>
<div id="dialogContainer">
	<div class="content">
        <div class="topMessage">
            <p>Have your driver scan the QR code to pay!
            <br/>
            <br/>
            <span style="color:red;">Do not close until transaction is successful.</span>
            </p>
        </div><!-- .topMessage -->
        <div class="QRCont">
        <?php
QRcode::png('test');
			
        ?>
        </div><!-- .QRCont -->
        <input type="button" class="close" value="Close" onClick="closeDialogBox();"/>
    </div><!-- .content -->
</div><!-- #dialogContainer -->
<?php
$DBH = null;
?>