JSFiddle - React, Tailwind, and code Playground

Stripes*

by Jennifer Perrin

HTML

<div id="container">
			<header>
				<div class="wrapper">
					<h1 class="font-bree pull-left">Stripes<span>*</span><span>/</span></h1>
					<nav class="font-bree pull-right clearfix">
						<ul>
							<li class="hidden-phone"><a href="">Home</a><span class="hidden-phone">/</span></li>
							<li><a href="#">About</a><span class="hidden-phone">/</span></li>
							<li><a href="#">References</a><span class="hidden-phone">/</span></li>
							<li><a href="#">Blog</a><span class="hidden-phone">/</span></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</nav>
				</div>
			</header>
			<div id="wrapcontent">
				<div id="wrappanel" class="clearfix">
					<div id="videoplayer" class="pull-right">
						<video  poster="http://leasabba.www63.a2hosting.com/frontend/exerciceResponsiveWebsite/www/img/video.jpg">
							<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
						</video>
					</div>
					<div id="sidetext" class="pull-left">
						<article>
							<h1 class="color-site font-bree">Can User Experience Be Beautiful? An Analysis Of Navigation In
							Portfolio Websites</h1>
							<p>This is a different take on Responsive Web design. elephant in the room; that is, how we can rely on media queries and <u class="color-site">breakpoints</u> without any concern for devices.</p>
							<p>Let’s start our journey by looking at the online tools such as Responsive Design Testing, Responsive.is, Responsinator and BriCSS.
							This article discusses how we can better.</p>
							<footer class="more pull-right">more &raquo;</footer>
						</article>
					</div>
				</div>				
				<section class="clearfix">
					<article >
						<div class="icon" id="marketing"></div>
						<h1>Marketing <span>Plans</span></h1>
						<p>Lorem ipsum dolor sit amet, consectuer adipiscing elit. Aenean commodo.</p>
						<footer class="more">more &raquo;</footer>
					</article>
					<article...

CSS

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea { 	color: #222; }

body {
	font-size: 1em;
	line-height: 1.4;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	padding: 0;
}

img { vertical-align: middle; }

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea { resize: vertical; }

/*---------- reset ----------*/
html { color: #000; }
body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
input, textarea, select { font-size: 100%; }
legend { color: #000; }
ul { list-style: none; }
/*---------- alterations ----------*/
strong { font-weight: bold; font-style: inherit; }
em { font-style: italic; font-weight: inherit; }

a { 
	text-decoration:none;
	color: #333;
 	}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.pull-right{ float:right; }
.pull-left{ float:left; }
.color-site { color: #53a665; }
.hidden-desktop { display: none;...