JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<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 id="grid" data-columns>
    <div class="click">
	<div class="wrapper">
		<figure class="effect-apollo">
                    <img src="http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg" />
                    <figcaption>
                        <h2>About <span>Me</span></h2>
                        <p>I don't bite - I promise!</p>
                    </figcaption>			
                </figure>
		</div>
		<div class="hidden">
			<div class="close"></div>
				<img src="http://fc05.deviantart.net/fs71/f/2014/298/a/6/chibi_portrait_tehangelscry_by_beaglecakes-d842ej2.png" class="thumb" />
					<p>Here's a little story all about how my life got flipped, turned upside down.</p>
					<p>I'm a Northampton based Web Developer, currently working for a Creative Agency.</p>
					<p>Skills are:</p>
					<p>CSS Html Wordpress Drupal jQuery PHP Email Responsive MySQL</p>
		</div>
	</div>
	
	
	<div class="click">
		<div class="wrapper">
		<figure class="effect-apollo">
                    <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" />
                    <figcaption>
                        <h2>Contact <span>Me</span></h2>
                        <p>Send me a message!</p>
                    </figcaption>			
                </figure>
		</div>			
		<div class="hidden">
			<div class="close"></div>
				
            <div class="innerPageWrapper">
                <form name="contactForm" action="mail.php" method="POST" onsubmit="return validateForm()">
                    <input type="text" name="name" placeholder="Your Name" />
                    <input type="text" name="email" placeholder="Your Email Address" />
		<textarea...

CSS

* {
  box-sizing: border-box;
}

img {
    width: 100%;
}

figure.effect-apollo {
    width: 50%;
}

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

/* Hover effects */

/* Common style */
figure {
  position: relative;
  float: left;
  overflow: hidden;
  height: auto;
  text-align: center;
  cursor: pointer;
  margin: 0;
  width: 100%;
}

figure img {
	position: relative;
	display: block;
	opacity: 0.8;
}

figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
    line-height:1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}

figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

figure h2 span {
	font-weight: 800;
}

figure h2,
figure p {
	margin: 0;
}

figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(2.5,2,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(2.5,2,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
  position: absolute;
  /* right: 0; */
  /* bottom: 0; */
  margin: 20px;
  padding-top: 10px;
  /* max-width: 150px; */
  width: 90%;
  border-top: 4px solid #fff;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: center;
    padding-top:20px;
	text-shadow: 0 0 50px...

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");
        
    }); 
});

$(document).mouseup(function (i){
    var container = $(".hidden");

    if (!container.is(i.target) && container.has(i.target).length === 0) {
        container.removeClass("show");
		$(".wrapper").removeClass("blurry");
    }
});

function validateForm() {
    var x = document.forms["contactForm"]["name"].value;
    if (x == null || x == "") {
        swal("Oops!", "Something went wrong on the page!", "error");
        return false;
    }
}