JSFiddle - React, Tailwind, and code Playground

by Velimir Topolovacki

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
<div class="row" data-equalizer>
			
				
					<div class="large-8 columns" data-equalizer-watch>
						<img src="http://thecoolcollector.net/wp-content/uploads/2012-03-31_14.30.28.jpg" alt="">
					</div>
				
				
					<div class="large-4 columns" data-equalizer-watch>
						<section class="about-me">
<!--
							<div class="headline-bg"></div>
							<div class="headline-bg front"></div>
-->
							<div class="about-me-content">
								<h1>Meet the man behind the amazing powers</h1>
								<p>Hey there! My name is Røkke and I am a multidisciplinary creative stranded on an island with hipsters and meatballs.  
								I am a self-taught pixel ninja and educated idea machine gun of all things digital. I am currently studying at Hyper Island as part of the Interactive Art Director 2014 program where I am deep down learning new things about myself and the digital world</p>
							</div>
<!--
							<div class="line vertical"></div>
							<div class="line horizontal"></div>
-->
						</section>
					</div>
			
			
		</div>

SCSS

.about-me {
		position: relative;
		background: black;
		color: #242424;
		
		.about-me-content {
			position: inherit;
			padding: 19%;
			z-index: 3;
			h1 {
				font-family: Georgia, serif;
				font-size: 5vh;
				font-weight: bold;
				color: #6d6c6c;
				margin-bottom: 9%;
				position: inherit;
				z-index: 1;
				.highlight {
					color: #6d6c6c;
				}
			}
			p {
				font-style: italic;
			}
		}
		.headline-bg {
			width: 65%;
			height: 13.5%;
			background: #131313;
			position: absolute;
			top: 13vh;
			left: 0;
		}
		.front {
			top: 21%;
			left: 0;
			width: 48%;
		}
		.line {
			position: absolute;
			z-index: 1;
		}
		.vertical {
			top: 18%;
			right: 21%;
			height: 77%;
			border-left: 1px solid #131313;
		}
		.horizontal {
			bottom: 10%;
			right: 12%;
			width: 74%;
			border-top: 1px solid #131313;
		}
	}

JavaScript

$(document).foundation();