JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div id="head">
        <nav>	<a href="#">Home</a>
	<a href="#">Bio</a>
	<a href="#">Contact</a>
	<a href="#">Portfolio</a>

        </nav>
    </div>
    <div id="content">
        <div id="gallery_wrap">
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
            <div class="picture"></div>
        </div>
    </div>
    <div id="foot"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin:0;
    font-family:"Raleway";
}
#head {
    height: 30%;
    display: block;
    background-color: #DBB84D;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
nav {
    height: 48px;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 0px;
    max-width: 960px;
    margin: auto;
}
nav a {
    height: 100%;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    font-weight: 200;
    text-decoration: none;
    line-height: 50px;
    border-top: 2px solid #EBCB6A;
    transition: all 0.5s ease-in;
}
nav a:visited, nav a:link, nav a:active {
    color: #fff;
}
nav a:hover {
    transition: all 0.5s ease-in;
    border-top-color: #6A8AEB;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#content {
    /* height: 70%; */
    display: block;
    background-color: #ececec;
}
#gallery_wrap {
    max-width: 1200px;
    /* height:100%; */
    width: 100%;
    margin: auto;
    box-shadow: 0 0 150px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.picture {
    height:250px;
    width: 250px;
    display: inline-block;
    background-color: #fff;
    margin: auto;
}
#foot {
    height: 300px;
    display: block;
    width: 100%;
    background-color: #676767;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}