JSFiddle - React, Tailwind, and code Playground
HTML
<title>{Home}</title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css" media="screen,projection" />
</head>
<body>
<header>
<nav class="top-nav">
<div class="nav-wrapper blue-grey">
<a href="/" class="brand-logo">TestyMcTestFace</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<ul id="normal-nav" class="right hide-on-med-and-down">
<li>
<a href="/about-us" class="waves-effect center-align">About Us</a>
</li>
<li>
<a href="/what-we-do" class="waves-effect">What We Do</a>
</li>
<li>
<a href="/contact" class="waves-effect">Contact</a>
</li>
</ul>
<ul class="side-nav" id="mobile-nav">
<li>
<a href="/about-us" class="waves-effect">About Us</a>
</li>
<li>
<a href="/what-we-do" class="waves-effect">What We Do</a>
</li>
<li>
<a href="/contact" class="waves-effect">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="mainContent">
<div class="parallax-container">
<div class="parallax"><img src="http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-5.png"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Homepage</h2>
<p class="grey-text text-darken-3 lighten-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus magna ut semper ultrices. Nam quis justo nec mi tincidunt semper sit amet eu ante. Maecenas ac vulputate ipsum. Suspendisse potenti. Morbi sit amet...
CSS
/**
* Stylesheet for entire site
*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Mono:400);
html,
body {
width: 100%;
height: 100%;
}
.flow-text {
font-size: 18px;
color: #212121;
}
.top-nav {
height: 128px;
}
.top-nav .mdi-navigation-menu,
.top-nav .right {
/*line-height: 128px;*/
}
.page-title {
font-size: 2.0rem;
line-height: 128px;
}
.right li a {
align-content: center;
padding-left: 2.0rem;
padding-right: 2.0rem;
}
h2 {
font-size: 3.0rem;
font-family: 'Roboto Mono';
font-weight: 400;
}
h4 {
font-size: 1.7rem;
font-family: 'Roboto Mono';
font-weight: 400;
}
h6 {
color: #00acc1;
font-size: 1.2rem;
}
.center-align {
width: 100%;
margin-left: auto;
margin-right: auto;
}
a {
color: #448aff;
text-decoration: none;
}
#contrasting_links a {
color: #212121;
}
.right .btn-floating i {
color: #212121;
font-size: 1.8rem;
}
.fixed-action-btn .btn-floating i {
color: #212121;
font-size: 1.8rem;
}
.collection.with-header .collection-item .secondary-content {
color: #212121;
}
/*Work card colors*/
.col.s12 .card-title,
.col.s12 .card-content {
color: white;
}
.col.s12 .card-action a {
color: rgb(253, 253, 253);
}
.col.m6.l6.s12 .card-title,
.col.m6.l6.s12 .card-content {
color: #212121;
}
.col.m6.l6.s12 .card-action a {
color: rgb(114, 114, 114);
}
/*Skills split-card colors*/
.col.s6 .card-title,
.col.s6 .card-content {
color: white;
}
/*Yellow Accent-2 waves effect*/
.waves-effect.waves-accent .waves-ripple {
background-color: rgba(255, 255, 0, 0.65);
}
/*Blue Lighten-1 Welcome page
.waves-effect.waves-blue .waves-ripple {
background-color: rgba(66, 165, 245, 0.65);
}
/*Light Blue Lighten-2 About page
.waves-effect.waves-lightblue .waves-ripple {
background-color: rgba(79, 195, 247, 0.65);
}
/*Cyan Lighten-1 Skills page
.waves-effect.waves-cyan .waves-ripple {
background-color: rgba(38, 198, 218, 0.65);
}
/*Teal Lighten-2 Work page
.waves-effect.waves-teall...
JavaScript
(function($) {
$(function() {
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space