JSFiddle - React, Tailwind, and code Playground

by Luca Mule

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<div id="container2" style="height: 100%; position: absolute;">
  <div id="primo">
	<div class="element1" style="font-family: PT Serif;">
	  <!-- Hidden on load by CSS -->
	  <div class="pop-up">
		<p> This is a toolpit</p>
	  </div>
	  <!-- Show the hidden div on hover -->
	  <a href="#"  class="trigger">
		<span class="name">Take actions</span>
	  </a>
	</div>
	
  </div>
  <div id="secondo">
	<div class="element2" style="font-family: PT Serif;">
	  <!-- Hidden on load by CSS -->
	  <div class="pop-up">
		<p> This is a toolpit</p>
	  </div>
	  <!-- Show the hidden div on hover -->
	  <a href="#"  class="trigger">
		<span class="name">Play a game </span>
	  </a>
	</div>
  </div>
  <div id="terzo">
	<div class="element3" style="font-family: PT Serif;">
	  <!-- Hidden on load by CSS -->
	  <div class="pop-up">
		<p> This is a toolpit</p>
	  </div>
	  <!-- Show the hidden div on hover -->
	  <a href="#" class="trigger">
		<span class="name">Pose a question</span>
	  </a>
	</div>
  </div>
  <div id="quarto">
	<div class="element4" style="font-family: PT Serif;">
	  <!-- Hidden on load by CSS -->
	  <div class="pop-up">
		<p> This is a toolpit</p>
	  </div>
	  <!-- Show the hidden div on hover -->
	  <a href="#" class="trigger">
		<span class="name">Analyse</span>
	  </a>
	</div>
  </div>
  <div id="quinto">
	<div class="element5" style="font-family: PT Serif;">
	  <!-- Hidden on load by CSS -->
	  <div class="pop-up">
		<p> This is a toolpit</p>
	  </div>
	  <!-- Show the hidden div on hover -->
	  <a href="#" class="trigger">
		<span class="name">Develop scenarios</span>
	  </a>
	</div>
  </div>
</div>

CSS

#primo { top:0;   left:0;  width:100%; height:20% }
#secondo { top:0;   left:0%;   width:100%; height:20%}
#terzo { top:0%; left:0;   width:100%; height:20%}
#quarto { top:0%; left:0%;  width:100%; height:20%}    
#quinto { top:0%; left:0%;  width:100%; height:20%}   

#container2 {
	height:100%;
	width:100%;
	position:fixed;
}

.element1 {
  width: 400px;
  text-align: left;
  float: right;
  position:relative;
  display:inline-block;
	margin-right:10%;
	margin-top:2%;
}

.element2 {
  width: 400px;
  text-align: left;
  float: right;
  position:relative;
  display:inline-block;
  top:0;   
  left:0; 
margin-right:30%;
margin-top:2%;  
}

.element3 {
  width: 500px;
  text-align: left;
  float: right;
  position:relative;
  display:inline-block;
  margin-right:60%;
}

.element4 {
  width: 300px;
  text-align: left;
  float: right;
  position:relative;
  display:inline-block;
  margin-right:55%; 
	margin-top:5%;  

}

.element5 {
  width: 500px;
  text-align: left;
  float: right;
  position:relative;
  display:inline-block;
  top:0;   left:0;  

}

.container2 .content2 p{
font-family:PT Serif,
}

span.name {
  display: block;
  color: black;
    line-height: 0.8;
    margin-top: 5%;
    font-size: 4vw;
    padding-top: 1%;
  letter-spacing: -3px;
    	z-index: 0;

}

a.trigger{
  z-index:10;
}


/* HOVER STYLES */
div.pop-up {
    display: none;
    text-align: left;
    position: absolute;
    margin-top: 90px;
    margin-left: 100px;
    width: 400px;
	height:460px;
    padding:13px;
    background: #B9CAE5 ;
    color: #000000;
    border: 4px solid black;
    font-size: 90%;
	overflow-y:scroll;
  box-shadow:10px 10px 15px rgba(19, 35, 60, 0.55);
  	z-index: 1;
}

JavaScript

</script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("div.pop-up").css({'display':'block','opacity':'0'})

        $("a.trigger").toggle(
          function () {
            $(this).prev().stop().animate({
              opacity: 1
            }, 500);
          },
          function () {
            $(this).prev().stop().animate({
              opacity: 0
            }, 200);
          }
        )
      });
	  
    </script>