JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>R.LACORNE ROCKS</title>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>

<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/script2.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>



<div class="blow" id="1" style="  background-color:#FF0011; " data-blow="false" ><h1>Titre</h1><h2>sous-titre</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor dui, feugiat et scelerisque condimentum, iaculis ultrices arcu. Pellentesque aliquam est quis elit lacinia interdum. Quisque ante tellus, fermentum in aliquam nec, fermentum vel orci. Proin sem quam, lacinia vel convallis et, volutpat at quam. Praesent feugiat condimentum pellentesque. Vivamus lectus tortor, consequat vitae laoreet nec, elementum dapibus arcu. Sed dignissim nulla in nibh cursus molestie. Integer nec ante justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Mauris eleifend lacinia nisl.</p>

<p>Nunc tempus sapien vitae nulla volutpat dignissim. Cras nec congue lorem. Morbi fermentum lacinia justo, eu molestie purus condimentum eget. Ut ultrices purus sollicitudin enim gravida in viverra turpis lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt, nisi quis sollicitudin mattis, lectus mauris mattis tortor, ut sagittis arcu eros eget urna. Duis euismod fermentum vestibulum. Duis neque dolor, tempus sed congue nec, tincidunt id tellus. Ut elementum vehicula pellentesque. Nunc nec ligula velit. Cras elementum sapien metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;...

CSS

::-webkit-scrollbar {

	border-radius: 15px;
	height: 10px;
	width: 10px;
}

::-webkit-scrollbar-thumb:horizontal {
	background-color: #f5f5f5;
	border-radius: 15px;
	height: 10px;
}

::-webkit-scrollbar-thumb:vertical {
	background-color: #f1f1f1;
	filter:alpha(opacity=40);
	opacity:0.4;
	border-radius: 15px;
	height: 15px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #fff;
	filter:alpha(opacity=100);
	opacity:1;
	border-radius: 15px;
	height: 15px;
}



body {
	margin: 0;
	padding: 0;
	text-align: center;
	background: #000;
	-webkit-background-size: 1807px 850px;
	overflow-y:hidden;
	overflow-x:hidden;
	height:100%;
}


p { font-family: Open Sans, helvetica, arial, sans-serif; font-size: 13px; text-align: left; color: #FFFFFF; margin-right: 5px; line-height:17px; overflow:auto; margin:15px; }
/* FONTS */

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

}

@font-face {
    font-family: 'OpenSansLight';
    src: url('OpenSans-Light-webfont.eot');
    src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Light-webfont.woff') format('woff'),
         url('OpenSans-Light-webfont.ttf') format('truetype'),
         url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('OpenSans-LightItalic-webfont.eot');
    src: url('OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-LightItalic-webfont.woff') format('woff'),
         url('OpenSans-LightItalic-webfont.ttf')...

JavaScript

$(document).ready(function(){
						   
			$('.background').css('font-size',($(window).width()*0.1));
	
			$(".blow").each(function(){
			//$(this).css({height:($(this).height() * 0.5), width:($(this).width() * 0.5)}).attr("data-blow" ,"false");	
			});
			
			
			
		   $('.blow').on('click', function(event){
    var element = $(this);
    if(element.attr('data-blow') == 'true'){
        element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
		$(this).addClass('blow')
		$(this).removeClass('overflow')
    } else {
        element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
            $('body').animate({ scrollTop: element.offset().top });
        }).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
		
		
    }
});
			
			$(window).resize(function(){
    $('.background').css('font-size',($(window).width()*0.1));
	
});
			

        
			
});