JSFiddle - React, Tailwind, and code Playground

by Kelsey Williams

HTML

<!DOCTYPE HTML>
<html>
<head>
		<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,sap.ui.table"
				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>

		</script>

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

CSS

/* ----------------------------------------------
 * Generated by Animista on 2017-4-14 14:15:28
 * http://animista.net
 * T: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes slide-rotate-hor-t-bck{}@keyframes slide-rotate-hor-t-bck{}

@-webkit-keyframes slide-rotate-hor-b-bck{ 
  0%{-webkit-transform:translateY(50px) translateZ(-230px) rotateX(90deg);transform:translateY(50px) translateZ(-230px) rotateX(90deg);-webkit-transform-origin:bottom center;transform-origin:bottom center}
  10%{-webkit-transform:translateY(25px) translateZ(-110px) rotateX(45deg);transform:translateY(25px) translateZ(-110px) rotateX(45deg);-webkit-transform-origin:bottom center;transform-origin:bottom center}
  30%{-webkit-transform:translateY(25px) translateZ(-110px) rotateX(45deg);transform:translateY(25px) translateZ(-110px) rotateX(45deg);-webkit-transform-origin:bottom center;transform-origin:bottom center}
  40%{-webkit-transform:translateY(0) translateZ(0) rotateX(0deg);transform:translateY(0) translateZ(0) rotateX(0deg);-webkit-transform-origin:bottom center;transform-origin:bottom center}
  60%{-webkit-transform:translateY(0) translateZ(0) rotateX(0deg);transform:translateY(0) translateZ(0) rotateX(0deg);-webkit-transform-origin:top center;transform-origin:top center}
  70%{-webkit-transform:translateY(-25px) translateZ(110px) rotateX(-45deg);transform:translateY(-25px) translateZ(110px) rotateX(-45deg);-webkit-transform-origin:top center;transform-origin:top center}
  90%{-webkit-transform:translateY(-25px) translateZ(110px) rotateX(-45deg);transform:translateY(-25px) translateZ(110px) rotateX(-45deg);-webkit-transform-origin:top center;transform-origin:top center}
  100%{-webkit-transform:translateY(-50px) translateZ(230px) rotateX(-90deg);transform:translateY(-50px) translateZ(230px) rotateX(-90deg);-webkit-transform-origin:top center;transform-origin:top center}
  }@keyframes slide-rotate-hor-b-bck{ 
  0%{-webkit-transform:translateY(50px)...

JavaScript

var textStuff = new sap.m.Text ({id:"text1", text : "Starting up Transdimensional Engines", height:"2px"});
    textStuff.addStyleClass("slide1 roller");
    var textStuff2 = new sap.m.Text ({id:"text2",text : "Making things Pretty", height:"2px"});
    textStuff2.addStyleClass("slide2 roller");
    var textStuff3 = new sap.m.Text ({id:"text3",text : "Exploring things from out of this world" });
    textStuff3.addStyleClass("slide3 roller");
    var VB =new sap.m.VBox({
    	alignItems: "Center",
    	items:[textStuff, textStuff2, textStuff3]});
    VB.addStyleClass("roller sapUiLargeMarginTop");
		var flexbox = new sap.m.VBox({
    	height:"235px",
			items : [new sap.m.Image({src : "https://documents.wdf.sap.corp/share/proxy/alfresco/api/node/content/workspace/SpacesStore/e097e020-3588-4f25-924e-bfd1ecbd676d/D_F_logo-SolExp-lg.png", width:"100%"}), VB]
      });
      
       
		var form = new sap.ui.layout.form.SimpleForm({
			content:[flexbox]
		})
		
  var dialog =	new sap.m.Dialog({
					content : [form],
          showHeader: false,
          contentHeight:"300px"
				});
        
  dialog.open();