JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>


		

		<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("sample");
				var view = sap.ui.view({id:"idnew1", viewName:"sample.new", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

JavaScript

var flexbox=new sap.m.FlexBox({direction:"Column"});  
		
		flexbox.addItem( new sap.m.Input("pass",{placeholder:"value"}));  
    var oImage = new sap.ui.commons.Image("i1");
    oImage.setSrc("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
		flexbox.addItem( oImage);  
		flexbox.addItem( new sap.m.Button('login',{text:"Click for popup",press:function(){
			
			 
			oDialog1.open();
			
             
             
             
			
			}}));       
		flexbox.setAlignItems("Center");  
		flexbox.setJustifyContent("Center");  
		var oDialog1 = new sap.ui.commons.Dialog();
		oDialog1.setTitle("My first Dialog");
		var oText = new sap.m.Input("input1");
		oDialog1.addContent(oText);
		oDialog1.addButton(new sap.m.Button({text: "update", press:function(){
			
			var a = oText.getValue();
			sap.ui.getCore().byId("pass").setValue(a);
			oDialog1.close();}}));
	
	flexbox.placeAt("content")