JSFiddle - React, Tailwind, and code Playground

by hcgriggs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<body>
		<!-- begin navbar --> 
		<nav class="navbar navbar-default navbar-static-top">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#"><h1>TITLE</h1></a>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

		      <form class="navbar-form navbar-right" role="search">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">Submit</button>
		      </form>
		      
		      
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">Items</a></li>
		        <li><a href="#">Exhibits</a></li>
		        <li><a href="#">Something else here</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">About</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		          </ul>
		        </li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		 ...

CSS

/*style.css*/

html, body {
    height: 100%;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
}

.container-fluid {
	height: 100%;
}

p {
	font-family: 'Slabo 27px', serif;
	font-size: 20px;
}

h2 { 
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
}

/*images*/

.first-row img {
	height: 100%;
	width: 100%;

}

img {
	height: 100%;
	width: 100%;
	padding: 0;
}

/*navbar stuff*/

.navbar {
	height: 100px;
}


.navbar-nav li a {
	line-height: 60px;
}

.navbar-form {
	line-height: 60px;
}

.navbar-brand h1 {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 60px;
	color: black;
	line-height: 35px;
}

/*index rows*/

.first-row-row.row {
	height: 100%;
}

.intro-bottom.row {
	height:65%;
}
.intro-top.row {
	height:65%;
}

.second-row-row.row {
	height:70%;
}

.third-row-row.row {
	height:50%;
}

.fourth-row-row.row {
	height: 30%;
}

.footer.row {
	height:25%;
}

.col-md-3.footer {
	overflow: hidden; 
	height: 100%;
	border-top: solid white 25px;
	background-color: blue;
}

.col-md-4.first-row {
	background-color: green;
	height: 130%;
	overflow: hidden;
}

.col-md-4.third-row {
	height: 100%;
	overflow: hidden;
}

.col-md-4.left {
	background-color: gray;
	overflow: hidden;
	border-top: solid white 25px;
	border-right: solid white 12.5px;
}

.col-md-4.center {
	background-color: purple;
	overflow: hidden;
	border-top: solid white 25px;
	border-left: solid white 12.5px;
	border-right: solid white 12.5px;
}

.col-md-4.third-row.right {
	background-color: black;
	overflow: hidden;
	border-top: solid white 25px;
	border-right: solid white 12.5px;
}

.col-md-6.left {
	background-color: yellow;
	border-top: solid white 25px;
	border-right: solid white 12.5px;
	height: 100%;
	overflow: hidden;
}

.col-md-6.right {
	background-color: orange;
	border-top: solid white 25px;
	border-left: solid white 12.5px;
	height: 100%;
	overflow: hidden;
}

.col-md-8 {
	background-color: gray;
	height: 130%;
	overflow: hidden;
	border-left: solid...