JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div id="contentPreview" class="contentPreview" style="">
  <span id="contentPreviewWrapper">
    <div class="flowPage leftPage editablePage pushable" id="leftPage" style="width: 642.136px; height: 831px;">
      <div class="pusher">
        <div class="flowPageContainer ui-droppable" style="width: 606.363px; height: 795.227px; margin: 17.8864px;">
          <div class="flowContent frame flowAlignTarget flowLayoutFrame flowLayoutMovable ui-draggable ui-draggable-handle ui-droppable" id="flow-content-314b5d76-b51f-7c17-8513-cbe276a957c3" style="width: 301.384px; height: 78.1365px; left: 215.065px; top: 66.1289px; position: absolute; cursor: default;">
            <div class="imageOuterStyleWrapper">
              <div class="imageMiddleStyleWrapper">
                <div class="imageInnerStyleWrapper"><img src="https://img.plic.io/ojnYeF13jzVzJ3_iMVeCPoaewmezz7Ro21dh39S4S-g/fit/450/450/no/0/czM6Ly9wbGljLWlvL3Bob3Rvcy9iMzUxZDcyMS0zOTQ0LTQwZTYtOGE2ZC05Y2FmOGY5MGM5MmMvb3JpZ2luYWwvQkxVRSUyMEJBTk5FUiUyMEFSUk9XLnBuZw"></div>
              </div>
            </div>
          </div>
          <div class="flowContent frame flowAlignTarget flowLayoutFrame flowLayoutMovable ui-draggable ui-draggable-handle ui-droppable" id="flow-content-5de1ee23-9086-da9e-d0ed-653748d0ff82" style="width: 301.384px; height: 78.1365px; left: 85.6035px; top: 630.728px; position: absolute; cursor: default; z-index: 57;">
            <div class="imageOuterStyleWrapper" style="transform: scaleX(-1);">
              <div class="imageMiddleStyleWrapper">
                <div class="imageInnerStyleWrapper"><img src="https://img.plic.io/ojnYeF13jzVzJ3_iMVeCPoaewmezz7Ro21dh39S4S-g/fit/450/450/no/0/czM6Ly9wbGljLWlvL3Bob3Rvcy9iMzUxZDcyMS0zOTQ0LTQwZTYtOGE2ZC05Y2FmOGY5MGM5MmMvb3JpZ2luYWwvQkxVRSUyMEJBTk5FUiUyMEFSUk9XLnBuZw"></div>
              </div>
            </div>
          </div>
          <div class="flowContent frame flowAlignTarget flowLayoutFrame flowLayoutMovable ui-draggable ui-draggable-handle...

CSS

.flowPage {
	font-family: open sans, emoji, symbola, noto sans cjk, noto sans arabic, free serif;
	position: relative;
    box-sizing: initial;
	color: rgb(0, 0, 0);
	line-height: 1.33;
	text-align: center;
}

.contentPreview .flowPage {
	float: left;
	height: 100%;
	border: 1px solid black;
	background: white;
	/* Override pushable  */
	overflow-x: visible;
}




.imageInnerStyleWrapper, .imageMiddleStyleWrapper, .imageOuterStyleWrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.imageInnerStyleWrapper {
	overflow: hidden;
}
.imageOuterStyleWrapper img, .imageMiddleStyleWrapper img , .imageInnerStyleWrapper img  {
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	left:0;
	top: 0;
}

.flowPage .frame {
	position: absolute;
	z-index: 50;
	border: 1px solid transparent;
}
.flowPage .frame img {
	width: 100%;
	height: 100%;
}
/* Chrome displays some rotated images blurry without this as of 5/15/2018 */
.contentPreview .flowPage .frame img {
	transform: translateZ(0);
}

.flowPage .flowFreeText {
	position: absolute;
	z-index: 50;
	border: 1px solid transparent;
}