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.m,sap.ui.commons"
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("learning");
var view = sap.ui.view({id:"idfirst1", viewName:"learning.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 container1 = new sap.m.TileContainer({
height:"50%",
tiles:[
new sap.m.StandardTile({
icon : "sap-icon://Enterprise",
title:"Enterprise Structure",
/*press:function(){
oController.navigateToCustomer();
},*/
}),
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"Master Data",
press:function(){
oController.navigateToMasterdata();
},
}),
new sap.m.StandardTile({
icon:"sap-icon://supplier",
title:"SD",
}),
new sap.m.StandardTile({
icon:"sap-icon://my-sales-order",
title:"MM",
}),
]
});
var tileContainerBottom = new sap.m.TileContainer({
height:"50%",
tiles : [
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"FI",
}),
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"CO",
}),
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"PP",
}),
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"PM",
}),
new sap.m.StandardTile({
icon:"sap-icon://crm-sales",
title:"PM",
}),
],
});
var app = new sap.m.App({
pages:[
new sap.m.Page({
enableScrolling:false,
content:[container1,tileContainerBottom]
})
]
});
app.placeAt("content");