JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<!--Built with jQuerin Grid Builder-->
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta http-equiv="cleartype" content="on">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="style.css">
</head>
<body>

<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>-->
 <div class="row">

        <div  class="col span_1_of_5 ">
a
     </div>
        <div  class="col span_1_of_5 ">
b
     </div>
        <div  class="col span_1_of_5 ">
c
     </div>
        <div  class="col span_1_of_5 ">
d
     </div>
        <div  class="col span_1_of_5 ">
e
     </div>
   </div>
 <div class="row">

        <div  class="col span_1_of_2 ">
f
     </div>
        <div  class="col span_1_of_2 ">
g
     </div>
   </div>

</body>
</html>

CSS

/*Resetting css for consistency*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, 
pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong,
sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,time,mark, 
audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
 body {line-height: 1;}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
 nav ul {list-style: none;}
 blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
 a {margin: 0;padding: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
 ins {background-color: #ff9;color: #000;text-decoration: none;}
 mark {background-color: #ff9;color: #000;
 font-style: italic;font-weight: bold;}del {text-decoration:  line-through;}
 abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;}
 table {border-collapse: collapse;border-spacing: 0;}
 hr {display: block;height: 1px;border: 0; border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}
 input, select {  vertical-align: middle;}
.col {float:left;height:100%;}

/*These are all the widths of elements*/
.span_1_of_5{ width :20%;}
.span_1_of_2{ width :50%;}
/*Heights*/
.row:nth-of-type(1){
   height:209px;
}

.row:nth-of-type(2){
   height:201px;
}
/*These are the heights of the subrows*/

/*Make it responsive dude*/

@media only screen and (max-width: 480px) {
.span_1_of_5{ width : 100%;}
.span_1_of_2{ width : 100%;}
}