JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://hifive.github.io/hifive-res/fw/current/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/ext/jqplugins/shadow-animation/1.11/jquery.animate-shadow-min.js"></script>
<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/h5.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/magnetContainer/src/MagnetController.js"></script>
<div class="magnet-wrapper">
  <div class="sample red"></div>
  <div class="sample blue"></div>
  <div class="sample green"></div>
  <div class="sample yellow"></div>
  <div class="sample purple"></div>
  <div class="sample gray"></div>
</div>

CSS

.magnet-wrapper {
	position: relative;
}

.sample {
	width: 120px;
	height: 120px;
	float: left;
	cursor: pointer;
	position: absolute;
}

.red {
	background-color: #F3C0AB;
  top: 0;
  left: 0;
}

.blue {
	background-color: #99CFE5;
  top: 200px;
  left: 200px;
}

.green {
	background-color: #98DE8D;
  top: 200px;
  left: 400px;
}

.yellow {
	background-color: #FFF599;
  top: 0px;
  left: 400px;
}

.purple {
	background-color: #D27EB3;
  top: 0px;
  left: 200px;
}

.gray {
	background-color: #E3E3E3;
  top: 200px;
  left: 0px;
}

JavaScript

$(function() {
	h5.core.controller('.magnet-wrapper', h5.ui.components.MagnetContainer.MagnetController)
});