JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Hot Spots</span>
</nav>

<div id="hotspots">
  <div class="hotspot-img">
    <img src="https://i.imgur.com/6ETpcKf.png" alt="" />
  </div>
</div>

CSS

#hotspots {
  height: calc(100vh - 56px);
  position: relative;
  overflow: hidden;
}

.hotspot-img {
  position: absolute;
  height: 100%;
  top: 50%;
}

.hotspot-img IMG {
  display: block;
  width: 100%;
  transform: translate(0, -50%);
}