JSFiddle - React, Tailwind, and code Playground

HTML

<div id="portfolio">
<div id="targetContent">Html to load here</div>

<div class="container">
    <a class="iframe" href="http://jsfiddle.net/">Link to the HTML file</a>
</div>
</div>

CSS

#portfolio{
	background-color:#0074bd;
	width:100%;	
	position:relative;
}

#targetContent{
    width: 100%;
	height:100%;
	position:relative;
    background-color:#000;
    color:#fff;
}

.container{
     height:100%;   
}

JavaScript

var $targetDiv = $("#portfolio"), $iframe = $targetDiv.find("#targetContent");
$(document).ready(function() {
    $(".iframe").on("click", function(e) {
		e.preventDefault();
		$(".container").slideUp(500);
		$('html,body').animate({scrollTop:$("#portfolio").offset().top}, 500); 
        $iframe.load($(this).attr('href'), $iframe.slideDown(500));
		$close.click( function(){$iframe.slideUp(500), $(".container").slideDown(500), $close.css("opacity","0"), $('html,body').animate({scrollTop:$("#portfolio").offset().top}, 0);});
      }); // click	
}); //ready