JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Link-1</a></li>
    <li><a href="#">Link-2</a></li>
    <li><a href="#">Link-3</a></li>
    <li><a href="#">Link-4</a></li>
    <li><a href="#" class="active">Link-5</a></li>
</ul>

			<div class="d1x1">
				<h1 class="bracket">Games</h1>
				<a href="http://www.reddit.com/r/gaming/">/r/gaming</a> <br />
				<a href="http://www.reddit.com/r/PS4/">/r/PS4/</a> <br />
				<a href="http://www.reddit.com/r/pcmasterrace/">/r/pcmasterrace</a> <br />
				<a href="http://www.reddit.com/r/games/">/r/games</a> <br />
				<a href="http://www.reddit.com/r/pcgaming/">/r/pcgaming</a> <br />
			</div>

CSS

ul#menu{
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

ul#menu li{
     display: inline;
     list-style: none;
     padding-left: 15px;
}

ul#menu li a{
    background: none;
    color: #999;
    text-decoration: none;
}

ul#menu li a:hover{
    color: #333;
    text-decoration: none;
}
ul#menu li a.active{
    color:#333;
}

.d1x1 {
	text-align: center;
	height: 190px;
	width: 190px;
	margin: 4px;
	float: left;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
	transition: background-color 2s;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.1);
} 

.d1x1:hover {
	background-color: rgba(0, 0, 0, 0.7);
	transition: background-color 1s;
}

.d1x1 a:hover{
    color:#00CED1;
    text-decoration: none;
   }