JSFiddle - React, Tailwind, and code Playground

by Todd Squitieri

HTML

<title>this is a practice page</title>

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalization.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>


<body>

<div class="main-wrapper">

<!-- THIS IS THE HEADER TAG -->
	  <header>
		<div class="main-nav">
			<div class="main-logo"><h1>Limbo</h1></div>
			<ul>
				<li>Link 1</li>
				<li>link 2</li>
				<li>Link 3</li>
			</ul>
		</div>
	</header>

<!-- THIS IS THE END OF THE HEADER TAG -->


<!-- THESE ARE THE COLUMNS -->
<div class="main-content">


			<!--COLUMN 1-->
		<div class="primary-content col">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
						<!--END OF COLUMN 1-->


							<!--COLUMN 2-->
				<div class="secondary-content col">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
							<!--END OF COLUMN 2-->


											<!--COLUMN 3-->
									<div class="terciary-content col">
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis...

CSS

* {
	box-size: border-box;
	-moz-box-size: border-box;
}


/**=========>COLORS FOR ALL OF THE DIFFERENT COMPONENTS<========**/

html,
body {
	margin: 0;
	width: 100%;
}

.main-wrapper{
	width: 100%;
	margin: auto;
	height: 100%;
}


.clear {
	clear: both;
}


header { background-color: #541F14; padding: 20px;}
.col {background-color: #938172; font-family: 'Roboto', sans-serif; margin: 0; padding: 20px;}
footer { background-color: #626266; padding: 20px;}
.secondary-content {background-color: #8C9159;}
.terciary-content {background-color: #E3A354;}

/**=========>BUTTONS<========**/

.main-nav {
	padding: 10px;
	margin: 15px;
}

.main-logo {
	background-color: #CC9E61;
	border-radius: 5%;
	max-width: 400px;
	margin: auto;
	text-align: center;
}

.main-nav ul li {
	text-decoration: none;
	list-style: none;
	background-color: #CC9E61;
	padding: 10px;
	margin: 10px;
	text-align: center; 
}


@media screen and (min-width: 769px) {
	header {
		padding: 20px;
		height: 100px;
	}


	.main-nav ul li{
		min-width: 100px;
		margin: 10px;
		display: inline;
		float: right;

	}
	.main-logo {
		float: left; 
	}

	.primary-content {
		width: 33.3333%;
		float: left;
	}

	.secondary-content {
		width: 23.3333%;
		float: left;
			}

	.terciary-content {
		margin: auto;
		}

	.footer {
		clear: both;
	}

	.col {
		margin: 0;
		padding: 20px;
		min-width: 100px;
	}
	.col:last-child {
		word-wrap: initial;
	}
}