JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<div class="wrapper">
    	<div class="signin">
        	<nav id="login-register">
            	<ul>
                	<li><a href="">Login</a></li>
                    <li><a href="">Register</a></li>
                </ul>
            </nav>
        </div>
		<a id="logo" href="index.php"><h1>test.com</h1></a>
    </div>
</header>
<section class="home-images">
    	<div class="photo-grid">
        	<a href="">
            	<h2>Item 1</h2>
            </a>
        </div>
        <div class="photo-grid">
        	<a href="">
            	<h2>Item 2</h2>
            </a>
        </div>
        <div class="photo-grid">
        	<a href="">
            	<h2>Item 3</h2>
            </a>
        </div>
        <div class="photo-grid">
        	<a href="">
            	<h2>Item 4</h2>
            </a>
        </div>
        <div class="photo-grid">
        	<a href="">
            	<h2>Item 5</h2>
            </a>
        </div>
        <div class="photo-grid">
        	<a href="">
            	<h2>Item 6</h2>
            </a>
        </div>
    </section>

CSS

@charset "utf-8";
/* CSS Document */

/* ---- All Fonts Here ---- */

/*----------------------------------*/

/* ---- All Pre Sets Here ---- */
*{
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
}

body{
	height: 100%;	
}

header, nav, section, article, aside, footer, a{
	display: block;
}

ul{
	list-style-type: none;
}

h1{
	display: inline-block;
	position: relative;
}
/*----------------------------------*/

/* ---- Header ---- */
header{
	width: 100%;
	height: 75px;
	background-color: #2F4F4F;
	box-shadow: 0px 0px 8px #CCC;
	position: relative;
	z-index: 999;
}
/*----------------------------------*/

/* ---- Wrappers ---- */
.wrapper{
	margin: 0 auto;
	width: 90%;
	height: 100%;
	max-width: 1100px;
	position: relative;
}
/*----------------------------------*/

/* ---- Images ---- */

/*----------------------------------*/

/* ---- Anchor ---- */
a#logo{
	margin-left: 75px;
	height: 100%;
	line-height: 75px;
	color: #CCC;
	text-decoration: none;
	text-shadow: 0px 0px 2px #000;
	font-size: 1em;
	display: inline-block;
	position: relative;
}

nav#login-register a{
	text-decoration: none;
	color: #CCC;
	text-shadow: 0px 0px 2px #000;	
}

.photo-grid a{
	width: 100%;
	height: 100%;
	display: block;
	color: #FFA500;
	text-shadow: 0px 0px 2px #000;
	text-decoration: none;
	font-size: 2em;
	text-align: center;
	position: relative;
}

.photo-grid a:hover{
	box-shadow: 0px 0px 8px #FFA500;	
}
/*----------------------------------*/

/* ---- Navigations ---- */
nav#login-register{
	margin-top: 28px;
	position: relative;
}
/*----------------------------------*/

/* ---- Divs ---- */
.signin{
	margin-right: 75px;
	height: 100%;
	position: relative;
	display: inline-block;
	float: right;	
}

section.home-images .photo-grid{
	width: calc(33.33% - 2px);
	height: 50%;
	position: relative;
	background: -webkit-radial-gradient(#2F4F4F, #ccc); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(#2F4F4F, #ccc); /* For Opera 11.6 to 12.0 */
	background:...