JSFiddle - React, Tailwind, and code Playground

by Nikita Danilov

HTML

<body>
  <div class="box" id="agregat">

    <div id="img-box">
      <img src="img/1.jpg" style="display: block;" alt="" usemap="#Map" />
    </div>

    <map name="Map" id="Map">
      <area alt="" title="" href="#" shape="poly" coords="55,744,234,743,236,869,60,877" />
      <area alt="" title="" href="#" shape="poly" coords="243,745,409,747,411,869,249,871" />
      <area alt="" title="" href="#" shape="poly" coords="418,745,579,744,579,870,423,875" />
      <area alt="" title="" href="#" shape="poly" coords="593,746,738,745,743,871,596,880" />
      <area alt="" title="" href="#" shape="poly" coords="750,748,892,748,891,872,756,882" />
      <area alt="" title="" href="#" shape="poly" coords="901,746,907,875,1042,875,1040,751" />
      <area alt="" title="" href="#" shape="poly" coords="1062,762,1069,872,1196,877,1192,762" />
      <area alt="" title="" href="#" shape="poly" coords="1218,758,1220,877,1353,880,1351,766" />
      <area alt="" title="" href="#" shape="poly" coords="1391,763,1521,765,1518,879,1396,878" />
      <area alt="" title="" href="#" shape="poly" coords="1585,699,1881,703,1868,887,1577,889" />
      <area alt="" title="" href="#" shape="poly" coords="1959,753,2108,753,2119,889,1957,881" />
      <area alt="" title="" href="#" shape="poly" coords="2177,748,2333,754,2338,873,2177,879" />
      <area alt="" title="" href="#" shape="poly" coords="2384,750,2557,753,2550,870,2385,880" />
      <area alt="" title="" href="#" shape="poly" coords="2597,751,2779,752,2763,872,2597,873" />
      <area alt="" title="" href="#" shape="poly" coords="2801,741,3040,739,3026,878,2798,884" />
      <area alt="" title="" href="#" shape="poly" coords="3062,739,3305,738,3301,869,3055,873" />
      <area alt="" title="" href="#" shape="poly" coords="3325,737,3579,738,3566,879,3318,871" />
      <area alt="" title="" href="#" shape="poly" coords="3596,812,3744,810,3743,882,3589,884" />
      <area alt="" title="" href="#" shape="poly"...

CSS

body {
      overflow: hidden;
    }

.total_ab {
  position: absolute;
  top: -7px;
}

.box {
  /* Прежний .box */
  /*background-position: 45% -415%;
    background-size: 300%;
    position: relative;
	padding-bottom: 100%;
    overflow: hidden;*/
  /*background: url('../img/1.jpg') no-repeat 50% 50%; */
  width: 50%;
  overflow-x: scroll;
}

.box:after {
  content: "";
  display: block;
  padding-bottom: 50%;
}

.img-box {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

*::-webkit-input-placeholder {
  color: #3d0505;
  opacity: 1;
}

*:-moz-placeholder {
  color: #3d0505;
  opacity: 1;
}

*::-moz-placeholder {
  color: #3d0505;
  opacity: 1;
}

*:-ms-input-placeholder {
  color: #3d0505;
  opacity: 1;
}

@font-face {
  font-family: MyriadPro;
  src: url(../fonts/MyriadPro-Regular.otf);
}

@font-face {
  font-family: MetaMediumLFC;
  src: url(../fonts/MetaMediumLFC.otf);
}

@font-face {
  font-family: MetaMediumC;
  src: url(../fonts/MetaMediumC.otf);
}

@font-face {
  font-family: MetaNormalCapsLFC;
  src: url(../fonts/MetaNormalCapsLFC.otf);
}

body {
  background: #E6E7E8;
  height: 100%;
  width: 100%;
  /*overflow: hidden;*/
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.clear {
  clear: both;
}

.max {
  min-width: 980px;
  max-width: 1920px;
  margin: 0 auto;
}

header {
  /*  padding-top: 27px;
      padding-left: 30px;*/
  min-width: 240px;
  width: 100%;
}

#second,
#second1,
#end_second1,
#right_second,
#first {
  display: none;
}

#hoverfirst {
  z-index: 999;
}

#first {
  z-index: 222;
}

.agregat:hover {
  /*  top: 6px;
        left: -46px;*/
  /*transform: scale(0.4);*/
  /*transition: transform linear 0.5s;*/
  /*   width: 1200px;
       height: 700px;*/
}

.q1 {
  transform: scale(0.9);
  /*transition: transform linear 1.5s;*/
  /*left: 0% !important;
        top: 126.5px !important;*/
  /*top: -55px !important;*/
  /*top: 0.1%;*/
  margin-top:...