JSFiddle - React, Tailwind, and code Playground

by Preservin

HTML

<link rel="stylesheet" href="https://test.myyt.ee/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="https://test.myyt.ee/scripts/jquery-ui-1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://test.myyt.ee/bootstrap/css/bootstrap.min.css">
<script src="https://test.myyt.ee/scripts/jquery.js"></script>
<script src="https://test.myyt.ee/scripts/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="https://test.myyt.ee/bootstrap/js/bootstrap.min.js"></script>
<div class="span10 journal_pages" style="margin-left:40px;">
		<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
<symbol id="thumb_12_HOR">
	<rect id="thumb_12_HOR_1" fill="#CCCCCC;" width="15" height="9"></rect>
	<rect id="thumb_12_HOR_2" y="10" fill="#CCCCCC;" width="15" height="9"></rect>
	<rect id="thumb_12_HOR_3" x="16" fill="#CCCCCC;" width="15" height="9"></rect>
	<rect id="thumb_12_HOR_4" x="16" y="10" fill="#CCCCCC;" width="15" height="9"></rect>
</symbol>
</defs>
</svg>
		<br>
			<!-- DRAW MAGAZINE PAGES -->
				<div class="page_1 page_nr" pagenr="1">
			<div class="area number_right">1</div>
						<div class="area pg_1_4x4 closed" position="1" matrix="4x4"><div class="draggable ui-draggable ui-draggable-handle" style="position: relative;"><div propid="7128" class="___1_4x4" data-toggle="tooltip" title="Kujundus kliendilt<br><br>">Kyte.ee OÜ</div></div></div>
		</div>
				<div class="page_2 page_nr" pagenr="2">
			<div class="area number_left">2</div>
						<div class="area pg_17_4x4 closed" position="17" matrix="4x4"><div class="draggable ui-draggable ui-draggable-handle" style="position: relative;"><div propid="7731" class="___2_4x4" data-toggle="tooltip" title="Kujundus kliendilt<br><br>">TOODE AS</div></div></div>
		</div>
					<div class="page_3 page_right page_nr" pagenr="3">
				<div class="area...

CSS

.journal_pages {
    overflow-y: scroll;
    height: 600px;
}
.ads_stories {
  width: 140px;
}
.draggable {
  line-height: 0px;
  cursor: pointer;
  z-index: 2;
}
.tooltip-inner {
  line-height: 10px;
}
.story_pages .draggable, .ad_pages .draggable {
  display: inline-block;
  margin: 1px;
}
.story_sequence {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}
.draggable div:first-child {
  background:url("https://test.myyt.ee/images/layout/ads.png");
  display:inline-block;
  background-repeat:no-repeat;

  font-size: 10px;
  line-height: 10px;
  position: relative;
  left: 1px;
}
.draggable span {
  padding: 5px;
}
.draggable [class*="kaas"] {
  width:78px;
  height:118px;
  float:none;
}
[class*="__1"] {background-position:-240px -120px !important;}
[class*="__-1"] {background-position:-320px -120px !important;}
[class*="__2"] {background-position:-400px -120px !important;}
[class*="__-2"] {background-position:-480px -120px !important;}

.draggable .__8x4 {
  width:158px;
  height:118px;
  float:none;
  background-position:0 0 !important;
}

.draggable [class*="4x4"]{
  width:78px;
  height:118px;
  float:none;
}
.__4x4 {background-position:0 -120px !important;}
._1_4x4 {background-position:-80px -120px !important;}
._17_4x4 {background-position:-160px -120px !important;}

.draggable [class*="4x2"] {
  width:78px;
  height:58px;
}
.__4x2 {background-position:0 -240px !important;}
._1-9_4x2 {background-position:-80px -240px !important;}
._17-25_4x2 {background-position:-160px -240px !important;}
._1-17_4x2 {background-position:-240px -240px !important;}
._9-25_4x2 {background-position:-320px -240px !important;}
._1_4x2 {background-position:-400px -240px !important;}
._9_4x2 {background-position:-480px -240px !important;}
._17_4x2 {background-position:-560px -240px !important;}
._25_4x2 {background-position:-640px -240px !important;}

.draggable [class*="2x4"] {
  width:38px;
 ...

JavaScript

$('.draggable div').tooltip({
		placement:'bottom',
		html: true
	});