JSFiddle - React, Tailwind, and code Playground

by Mark James

HTML

<div id="wrap1">
<div id="pageone">&nbsp;</div>

<div id="pagetwo"><span style="font-size: 16px;"><strong>Thanks for visiting. </strong></span><br />
<br />
Make sure to check back often for updates!<br />
<a href="http://community.plantae.org/home"><strong>Sign-in again</strong></a></div>

<div id="secretpage"><a href="http://community.plantae.org/home"><strong>Sign-in again2</strong></a></div>
</div>
<script>
jQuery("#pageone").html('<object width="400" height="200" data="https://go.plantae.org/en/signout" style="overflow:hidden; width:420px; height: 220px;">');
</script>

CSS

#wrap1{
  margin: 0 auto;
  width: 400px;
  height: 200px;
  position: relative;
}

#secretpage {
  position: absolute;
  top: 100px;
  left: 143px;  
  width: 150px;
  opacity: 0;
  /*overflow: hidden;   
  border: 1px solid black;
*/  
}

#pageone {
  top:83px;
  left: 5px;
  width: 400px;
  height: 200px;
  position: absolute;
  overflow: hidden;  
}

#pagetwo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 200px;
  overflow: hidden; 
  padding-top:30px;
  text-align: center;  
 }

#pagetwo a {
  line-height:34px;
}

#secretpage {
  z-index: 12;
}

#pageone {
  z-index: 11;
}

#pagetwo {
  z-index: 10;
}

JavaScript

$(document).ready(function(){

    $(window).load(function(){
     $("object").contents().find("sign").attr({"fill":"lime"});
    });


    
    
    $( <object> ).on( "click", function() {
  alert('yes');
});
});