JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!doctype html>

<html lang="en" class="no-js">
<head>
<title>  Responsive Web Design: Missing the Point | Brad Frost Web</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="http://bradfrostweb.com/wp-content/themes/v4/style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="http://bradfrostweb.com/wp-content/themes/v4/enhanced.css" media="screen  and (min-width: 600px)" />
<!--[if lt IE 9]>
    <link href="http://bradfrostweb.com/wp-content/themes/v4/enhanced.css" media="screen" rel="stylesheet">
<![endif]-->
<script type="text/javascript" src="http://bradfrostweb.com/wp-content/themes/v4/js/modernizr.js"></script>
<link rel='canonical' href='http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/' />
<link rel='shortlink' href='http://bradfrostweb.com/?p=3198' />
<meta name="description" content="Alex Mangini touched on something I think is extremely important. In his post," />
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2687475-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</head>
<body class="single single-post postid-3198 single-format-standard">
    <header class="header">
         <div>
              
              <h4 class="logo"><a href="/">Brad Frost Web</a></h4>
              <nav>
                   <ul class="nav">
                        <li><a href="/web/">Web</a></li>
                        <li><a href="/blog/">Blog</a></li>
                        <li><a href="/speaking/">Speaking</a></li>
                        <li><a...

CSS

/* Theme Name: Brad Frost Web V4 */

/*
Colorzzz
orange #be6700
blue #03015c
light beige #dedcb9
light beige2 #cdcaa2
light brown #250000
dark brown #100
*/

/*******************Reset*******************/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section { 
    margin: 0; 
    padding: 0; 
} 
ol, ul { 
    list-style: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}
header, footer, nav, section, article, hgroup, figure {
    display: block;    
}
/****************End Reset********************/

/****************Global Elements**************/
body { 
    font: 100%/1.5 "HelveticaNeue", "Helvetica", "Arial", sans-serif; 
    color: #250000;
    background: url(images/bg.png) #f6f5de; 
    text-align: center;
    border-top: 12px solid #100;
}
h1 { 
    font: italic 1.6em/1 Georgia, "Times New Roman", Times, serif;
    text-transform: lowercase;
    text-rendering: optimizeLegibility;
}
h2 {
    font-size:1.8em;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 2em 0 0.5em;
    text-transform: lowercase;
    text-rendering: optimizeLegibility;
}
h3 { 
    font: bold italic 1.3em/1 Georgia, "Times New Roman", Times, serif;
    text-shadow: 2px 2px 0 #cdcaa2; 
    text-transform: lowercase;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #cdcaa2;
    margin-bottom: 0.5em;
    text-rendering: optimizeLegibility;
}
h4 { 
    font-size: 1.2em;
    text-transform: lowercase; 
    margin-bottom: 0.5em;
}
h5 { 
    text-transform: uppercase;
    letter-spacing: 2px; 
    font-weight: normal; 
    border-bottom: 1px dotted rgba(36,50,0,0.2); 
}
a { 
    color: #be6700; 
    outline: 0; 
}
a:hover { 
    color: #f08200;
}
p {
    margin-bottom: 1.4em;    
}
blockquote { 
    font: italic 1.2em/1.4 Georgia, "Times New Roman", Times, serif;
    color: #03015c;
    display: block; 
    padding: 0.75em;
    margin: 0 0 0.9em;
    background:...