JSFiddle - React, Tailwind, and code Playground

by Vaibhav Deshwal

HTML

<div class="article">
<img src="http://i1348.photobucket.com/albums/p738/VinylTapUK/JuliaBalfourLeathercraftInverseColours_zps03a13ce0.jpg?t=1404230971" class="final">
<div class="main">
<p>Global Warming is an ever increasing issue that seems to be monopolising each and every person’s brain that populates the earth. This is because of two main reasons. Firstly, media publication is almost constantly embedding scary stories – seemingly exaggerated to Hollywood-style levels until you dig deeper into the dark, unwelcoming yet unfortunately truthful crevices - and frightening forecasts into our malleable minds. Secondly, scientific evidence has become almost undeniable and projections of the self-destruction of human-kind are fast becoming reality. So it’s no wonder that not only tree-huggers but the rest of mankind – minus the odd few petrol-head half-wits with under-developed cranium contents that believe that the Earth orbits an enormous V8 engine – endeavour to find a solution to ending of human existence. However, is raising the tax on the incredibly attractive culprit (oil) a step in the right direction?</p>
&nbsp; &nbsp; 
<div id="container">

<div id="left">Many people believe so. They argue that the raised price of a primary cause of Global Warming would 
reduce the demand and therefore would at least slow the process should it not cease completely. This is similar to having 
a diet. You have most probably recently seen a huge 20 stone hefferlump somehow defying the will of gravity by waddling 
upright through the doors of a McDonalds to engulf another pile of fatty disgustiness they simply call a ‘Big-Mac’. At 
this moment you most probably thought to yourself that he’s had enough, therefore you would suggest that he should stop 
eating ‘Big-Mac’s’. This can be linked to humanities problem with Global Warming. If you think of this 20 stone monster 
as all humans and the burgers as the oil, you can probably see where they are coming from. They think that...

CSS

.article {
background-color: black;
}
.main {
color: white;
margin: 0 10px 10px 10px;
border: solid white 5px;
border-radius: 10px;
padding: 50px 10px 10px 10px;
font-family: arial;
position: relative;
top:-50px;
overflow: auto;
}
.final {
z-index: 5;
display: block;
margin: 0 auto;
position: relative;
}
#left {
width: 30%;
float: left;
}
#middle {
width: 30%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 0% 2% 0% 2%;
}
#right{
width: 30%;
float: left;
}
#left, #middle, #right {
background: rgba(255,255,255,.3);
height: 100%;
overflow: auto;
}
#container {
background: rgba(255,255,255,.3);

}

JavaScript

var all_heights = [];
$("#container>div").each(function(){
    all_heights.push(this.height());
};
console.log(all_heights);