JSFiddle - React, Tailwind, and code Playground

by IvanGrishov

HTML

<section class="boiler">
  <div class="boiler__background">
    <img src="https://i.ibb.co/7CZtT0q/fe33e8c97bdbce1.png" alt="fe33e8c97bdbce1" border="0">
    <div class="boiler__dots dots">
      <div class="dots-item" style="top: 10%; left: 64%"></div>
      <div class="dots-item" style="top: 19%; left: 61%"></div>
      <div class="dots-item" style="top: 38%; left: 40%"></div>
    </div>
  </div>
</section>

SCSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.boiler {
  position: relative;
  padding-bottom: 56%;
}
.boiler .boiler__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.boiler .boiler__background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  width: 100%;
  height: 100%;
  position: absolute;
}

.dots-item {
  width: 24px;
  height: 24px;
  background: deeppink;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}

@media (max-width: 768px) {
  .boiler {
    height: 500px;
  }
}

/*# sourceMappingURL=style.css.map */