JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="left-top"><a>Aanmelden</a>
</div>
<div class="left-bottom"><a>Inloggen</a>
</div>
</div>
<div class="col-md-6">
<img src="http://placehold.it/350x310" alt="" class="welcome-image" />
</div>
<div class="col-md-3">
<div class="right-top"></div>
<div class="right-bottom"></div>
</div>
</div>
</div>
CSS
/* Hide the navigation bar */
/* line 2, ../sass/welcome.sass */
.navbar {
display: none;
}
/* line 6, ../sass/welcome.sass */
.welcome-image {
width: 100%;
height: 430px;
}
/* line 11, ../sass/welcome.sass */
body {
background-color: #282828;
}
/* line 15, ../sass/welcome.sass */
.left-bottom, .left-top, .right-top, .right-bottom {
height: 200px;
background-color: #64ff64;
}
/* line 19, ../sass/welcome.sass */
.left-top, .right-top {
margin-bottom: 30px;
background-color: #fa6464;
}
/* line 25, ../sass/welcome.sass */
.right-top {
background-color: #6464ff;
}
/* line 29, ../sass/welcome.sass */
.right-bottom {
background-color: #d200ff;
}
/* line 34, ../sass/welcome.sass */
.col-md-3 {
line-height: 4.5;
text-align: center;
}
/* line 37, ../sass/welcome.sass */
.col-md-3 a {
font-size: 3em;
color: #fff;
}
/* line 44, ../sass/welcome.sass */
.fullscreen {
width: 100%;
height: 100%;
}
JavaScript
$(document).ready(function () {
$('[class^=left], [class^=right]').on('click', function () {
// Did the css the fast way, don't judge.
$(this).parent().css('position', 'absolute');
$(this).parent().css('z-index', '2000');
$(this).parent().css('width', '100%');
$(this).parent().css('height', '100%');
$(this).addClass('fullscreen');
});
});