JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div>
 Header
</div>

<div class="section group">
	<div class="col span_1_of_2">
	This is column 1
	</div>
	<div class="col span_1_of_2">
	This is column 2
	</div>
</div>  
<div class="section group">
	<div class="col span_1_of_2">
	This is column 1
	</div>
	<div class="col span_1_of_2">
	This is column 2
	</div>
</div>  
<div class="section group">
	<div class="col span_1_of_2">
	This is column 1
	</div>
	<div class="col span_1_of_2">
	This is column 2
	</div>
</div>  

<div>
 footer
</div>

CSS

.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}



/****************************
NAVBAR
****************************/



#navbar {
background-color: black;
height:40px;
width:1454px;
margin-left: -30px;
margin-top: -16px;
border-bottom: 1px solid #ff0000;


}

#navbar ul {
text-decoration: none;
list-style: none;
}

#navbar ul li { 
display:inline-block;
float:right;
color:white;
padding-right: 190px;
padding-top: 10px;
font-family: 'Comfortaa', cursive;
font-weight: 10;


}


#navbar ul a li:hover { 
color:#000;
text-shadow: 0.1em 0.1em #fff;
font-size: 1.1em;
margin-top:-1px;

}









/****************************
HOME PAGE LAYOUT
****************************/

#box_one {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%

}

#box_two {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

#box_three {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}

#box_four {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%

}

#box_five {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width:...