JSFiddle - React, Tailwind, and code Playground

Responsive Web Design

by Jennifer Perrin

HTML

<div class="container">

	<header id="header">
		<div class="site-logo">RWD Template</div>
		<nav id="nav">
		  <ul>
			<li class="menu-btn"><a href="#">&nbsp;</a></li>
			<li><a href="#">Link #1</a></li>
			<li><a href="#">Link #2</a></li>
			<li><a href="#">Link #3</a></li>
		  </ul>
		</nav>
		<div class="clear"></div>
	</header>
	  
	<section id="content">

		<div class="column padded desktop-span60 mobile-span100">

			<h1 class="title">Header</h1>
			<img src="http://placehold.it/500x200&text=Column+1" border="0" style="width:100%;" />

			<article class="paddedx2">
				
				<h2>Article Title</h2>
				<h3>Smaller description</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tincidunt eros. Sed dictum risus blandit tellus dapibus a eleifend felis pulvinar. Nam vehicula tortor quis tellus sodales sit amet accumsan elit hendrerit. Donec dapibus adipiscing enim, nec venenatis quam mollis consectetur. Aenean tristique mauris nec arcu ultrices in pulvinar erat pretium. Maecenas fermentum viverra venenatis. Aliquam erat volutpat. Phasellus viverra mauris vitae augue euismod bibendum venenatis nisi euismod. Maecenas fermentum tincidunt lorem sed tristique. Phasellus pretium dolor quis augue molestie eu varius est tincidunt.</p>
				<p><a href="#" class="link">Posted 2 days ago</a></p>

			</article>

			<article class="paddedx2">
				
				<h2>Article Title</h2>
				<h3>Smaller description</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tincidunt eros. Sed dictum risus blandit tellus dapibus a eleifend felis pulvinar. Nam vehicula tortor quis tellus sodales sit amet accumsan elit hendrerit. Donec dapibus adipiscing enim, nec venenatis quam mollis consectetur. Aenean tristique mauris nec arcu ultrices in pulvinar erat pretium. Maecenas fermentum viverra venenatis. Aliquam erat volutpat. Phasellus viverra mauris vitae augue euismod bibendum venenatis nisi euismod. Maecenas fermentum tincidunt lorem sed...

CSS

/* template styles */
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
    outline: 0;
}
body {
    background: #fff;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a img {
    border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* HTML Structure 
---------------*/
body { 
	background:#fff;
	font-size: 100%;
	font-family:"Source Sans Pro", Arial, Verdana;
	color:#222;
}
#header {
	background:#aaa;	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-bottom:4px solid #444;
}
#content {
	min-height:300px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	font-size:0.9em;
}
#footer {
	background:#ccc;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	font-size:0.8em;
}
/* use container to adjust widths */
.container...