JSFiddle - React, Tailwind, and code Playground

by indrajith patel

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("tabstrip");
				var view = sap.ui.view({id:"idfirst1", viewName:"tabstrip.first", 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 oModel = new sap.ui.model.json.JSONModel(); 
	     
	     oModel.setData(
	    		 {
	    			  name : "SAP",
	    			   password : "SCN",
	  
	    			   
	    			   
	    		 }
	    		 );
	     
	     sap.ui.getCore().setModel(oModel);
	     

		var oTabStrip1 = new sap.ui.commons.TabStrip("TabStrip1");
		oTabStrip1.setWidth("400px");
		oTabStrip1.setHeight("200px");
		
		var flexbox=new sap.m.FlexBox({direction:"Column"}); 
		  flexbox.addItem( new sap.m.Input("name",{placeholder:"Enter UserName", value : "{/name}" })); 
		  flexbox.addItem( new sap.m.Input("password",{placeholder:"Enter Password",value : "{/password}"}));
		
		
		oTabStrip1.createTab("General Data",flexbox);
		oTab2 = new sap.ui.commons.Tab("tab2");
		oTab2.setTitle(new sap.ui.core.Title("Title2",{text:"tab2"}));
		var label = new sap.m.Label("labelid", {text : "in the second tab strip"});
		oTab2.addContent(label);
		oTabStrip1.addTab(oTab2);
		
		
		
		 oTabStrip1.placeAt("content");