JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<div class="box-img">
<img src="http://www.positivoinformatica.com.br/uploads/images/linhas/para-voce/computadores/positivo-premium/Desk_Premium.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area class="monitor" alt="" title="" href="#" shape="poly" coords="257,111,258,162,325,171,325,102" />
    <area alt="" title="" href="#" shape="poly" coords="415,335,420,347,499,354,501,335,467,318,443,321" />
    <area alt="" title="" href="#" shape="poly" coords="408,49,398,282,521,283,528,53" />
    <area alt="" title="" href="#" shape="poly" coords="32,309,18,349,405,352,384,311" />

</map>

</div>
<div class="box-info">
   
</div>
 <div class="line-content-monitor">
   <div class="wrap-circle">
  <div class="circle">
    <div class="solid-circle"></div>
  </div>
</div>
   <div class="line-diagonal"> </div>
   <div class="line-frente"> </div>
   <div class="box-component-info">
      <p>Isto Ă© um monitor!</p>
   </div>
 </div>

CSS

.box-img{
  z-index: 1;
}
.box-info{
  width: 900px;
  height: 700px;
  
  position: absolute;
  top:0;
  z-index: -1;
}


.line-diagonal{
  border: 1px solid #000;
  border-top-right-radius: 1em;
  width: 220px;
  position: absolute;
  top:162px;
  transform: rotate(-30deg);
   z-index: 2;
}
.line-frente{
  border: 1px solid #000;
  border-top-left-radius: 1em;
  width: 70px;
  position: absolute;
  top:107px;
  left: 205px;
  z-index: 2;
}

/*Info do monitor*/
.line-content-monitor{
    display: none;
    position: absolute;
    top: -80px;
    left: 270px;
}

.wrap-circle{
  position: absolute;
  top: 205px;
  left: 5px;
}

.circle{
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 20px;

}

.solid-circle{
  width: 10px;
  height: 10px;
 z-index: 2;
  border-radius: 5px;
  background: #000;
  position: absolute;
  top: 8px;
  left: 7px;
}

.box-component-info{
  width: 200px;
  height: 69px;
  /*background: blue;*/
  position: absolute;
  top: 86px;
  left: 277px;
  border: 2px solid #000;
  border-radius: 4px;
  text-align: center;
  line-height: 69px;
}

.box-component-info p{
    
}

JavaScript

$(document).ready(function(){
	//.line-content-monitor
  
  var monitor = $(".line-content-monitor");
  $(".monitor").on("click", function(){
      monitor.fadeIn("slow");
  });
   

});