JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<script src="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.js"></script>
<link rel="stylesheet" href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css">
<div class="column">
    <div class="click">
		<div class="wrapper">
			<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
		</div>
		<div class="hidden">
			<div class="close"></div>
				<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="thumb" />
					Lorem ipsum dolor sit amet, et oblique voluptua necessitatibus eam. Vel ut semper ocurreret, eum epicurei laboramus delicatissimi in, vis eu hinc purto honestatis. Quod congue inciderint ius eu, ei vel reque tempor. Porro dicam tractatos sea id, id vix paulo fuisset dissentias. Eos ne laudem alienum sensibus, solum pericula prodesset qui ne. Duo et euismod delicata vituperatoribus, at facer melius pro, esse quidam possim ea est.
		</div>
	</div>
    
    <div class="click">
		<div class="wrapper">
			<img src="http://platinumbinaryoptions.net/wp-content/uploads/2015/01/clickhere2.png" />
		</div>
		<div class="hidden">
			<div class="close"></div>
				<div class="innerPageWrapper">
	                <form name="contactForm" id="contactForm">
                        <input type="text" name="name" id="name" placeholder="Your Name" />
                        <input type="submit" value="Send" /><input type="reset" value="Clear" />
	</form>
</div>
		</div>
	</div>
</div>

CSS

@font-face {
    font-family: 'champagne';
    src: url('../fonts/champagne.eot');
    src: url('../fonts/champagne.eot?#iefix') format('embedded-opentype'),
         url('../fonts/champagne.woff2') format('woff2'),
         url('../fonts/champagne.woff') format('woff'),
         url('../fonts/champagne.ttf') format('truetype'),
         url('../fonts/champagne.svg#champagne') format('svg');
    font-weight: normal;
    font-style: normal;

}

.click {
    float:left;
    width:50%;
}

.wrapper img {
    width:100%;
}

* {
  box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    margin:0;
    padding:0;
	background: #fff;
	font: 1em 'champagne',sans-serif;
}

/*div#nav {
	height: 50px;
	width: 100%;
	position: fixed;
	top:0;
	font-size: 1.4em;
	padding-right:50px;
	background: rgba(230,230,230,0.9);
	transition: 0.2s;
}*/

div#nav:hover {
	background: rgba(230,230,230,1);
	transition: 0.2s;
}

#nav a, 
#nav a:active, 
#nav a:visited {
	color: #54b7ce;
	text-decoration: none;
	float:right;
	margin-right:20px;
	line-height:50px;
}

.click{
	transition:0.5s;
}

.click:hover {  
    cursor:pointer;
}

.hidden,
.show {
    background:#fff;
    position:absolute;
    left:50%;
    top:50%;
    color:#444;
	z-index:10;
	transition: 0.5s;
}

.hidden{
    opacity:0;
    width:0;
    height:0;
    padding:0;
    margin:0;
    font-size:0;
    transform: scale(0);
}

.column div .show,
#nav div .show {   
	opacity: 1;
	width: 100%;
	height: 100%;
	padding: 20px;
	/*margin: -300px 0 0 -500px;*/
	font-size: 1em;
	transform: scale(1);
	cursor: default;
	line-height: 1.5em;
	position:fixed;
	top:0;
	left:0;
}

.column img.thumb,
#nav img.thumb {
	float: left;
	padding-right: 10px;
	width: 50%;
}


.close:before {
  content: 'x';
}

.close {
  display: block;
  font-size: 5em;
  color: #D8D8D8;
}

.close:hover {
    cursor: pointer;
	color: #bbb;
}

.blurry {
	-webkit-filter: brightness(1.5) saturate(0);
	opacity: 0.2;
	transition: 0.5s;
}

::-webkit-scrollbar {
   ...

JavaScript

$(function(){
	
    $(".wrapper").click(function(){
        $(this).next(".hidden").addClass("show");
		$(".wrapper").addClass("blurry");
		
        var curBodyWidth = $('body').width();
        
        $('body').css('overflow', 'hidden');
        var scrollWidth = $('body').width() - curBodyWidth;
        $('body').css('margin-right', scrollWidth + 'px');
        
    });
    
    $(".close").click(function(){
        $(".hidden").removeClass("show");
		$(".wrapper").removeClass("blurry");
		$("body").css("overflow","auto");
        $("body").css("margin-right","0");
        
    }); 
});

function validateForm() {
    
    if ($('#name').val() == '') {
        //alert("No!");
        swal("Oops!", "Something went wrong on the page!", "error");
        return false;
    }

}

$('#contactForm').submit(validateForm);