JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <div class="row">
                <div class="col-4" role="sidebar">
                    <div class="diamond"><span>RS</span></div>
                    <br />
                    <div class="brief">
                        Text here...
                    </div>
                    <form class="search">
                        <input type="text" placeholder="Search...">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                    <ul class="sidebar-menu">
                        <li class="github"><a href="#">Github</a></li>
                        <li class="twitter"><a href="#">Twitter</a></li>
                        <li class="stackoverflow"><a href="#">StackOverflow</a></li>
                        <li class="linkedin"><a href="#">LinkedIn</a></li>
                    </ul>
                </div>

                <div class="col-8" role="content">
                    <h1 class="title">Title</h1><div class="horizontal-rule"></div>
                    <nav class="subnav">
                        <ul>
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

SCSS

*,
*:after,
*:before {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
%clearfix {
	*zoom: 1;
	
	&:before,  &:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

$gridMinWidth: 30em;
$gridMaxWidth: 65em;

.container {
	width: 100%;
	margin: 0 auto;
}
.container.padding {
	padding: 40px 20px;
}
.container:after,
.row:after {
	content: "";
	display: table;
	clear: both;
}
.container, .row {
	@extend %clearfix;
}
[class*='col-'] {
	float: left;
	width: 100%;
	min-height: 1px;
}

@media only screen and (min-width: $gridMinWidth) {
	.container {
		width: 95%;
		max-width: $gridMaxWidth;
	}

	@for $i from 1 through 12 {
		.col-#{$i} {
			width: 100% / 12 * $i;
		}
	}
}

@mixin transition($str) {
	-webkit-transition: #{$str};
	-moz-transition: #{$str};
	-ms-transition: #{$str};
	-o-transition: #{$str};
	transition: #{$str};
}

body {
	background: url(../img/bg.png);
	border-top: 6px solid #16a085;
	font-family: 'Lucida Sans', sans-serif;
	color: #545454;
}
.container {
	position: relative;
	min-height: 100%;
	padding: 100px 0;
	text-align: center;

	background: #EFEFEF;
	border: 1px solid #E0E0E0;
	border-bottom: none;
}
div[role="sidebar"] {
	position: relative;
}
div[role="content"] {
	position: relative;
	text-align: left;
	padding-left: 40px;
	top: -30px;
}
.diamond {
	position: relative;
	margin: 0 auto;
	width: 140px; height: 140px;
	line-height: 140px;
	top: 14px;

	background: #16a085;
	color: #FFFFFF;
	font-size: 40px;
	text-shadow: 0px 2px 2px #117A65;
	border: 2px solid darken(#16a085, 2);

	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);

	span {
		position: relative;
		display: inline-block;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform:...