JSFiddle - React, Tailwind, and code Playground

by Gerlando Prado

HTML

<header>
    	<div class="content">  
            <div class="login">
                <a href="#" class="btn-newacc">Criar uma conta</a>
            	<a href="#" class="btn-login">Fazer Login</a>
            </div>
        </div>
    </header>

CSS

@charset "utf-8";

/*	**************************
	CORES USADAS: 
	
	#006797 = Azul escuro
	#1A70D5 = Azul claro [OLD]
	#E9EAED = Branco Azulado
	#2B2D33 = Preto Azulado
*/

@import(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto+Condensed:300,400,500,600,700);

body{
	background: #E9EAED;
}

.content{
	width: 340px;
	margin: 0px auto;
}

h1,h2,h3,h4,h5,h6,p,span,a{
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

hr{
	width: 100%;
	border: none;
	border-top: 1px solid rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(255,255,255,0.30);
}

/** TOPO **/
header{
	width: 100%;
    min-height: 97px;
	padding: 20px 0px;
	background: #006797;
	border-bottom: 3px solid rgba(0,0,0,0.25);
}

header div.content{
	display: table;
}

/** Barra de login **/
header div.login{
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}

header div.login a.btn-login{
	background: #FF9000;
	padding: 10px 25px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFF;
	border-radius: 4px;
	border-bottom: 4px solid rgba(0,0,0,0.15);
	display: inline-block;
    margin-left: 20px;
	transition: 250ms ease all;
}

header div.login a.btn-login:hover{
	background: #FF7500;
}

header div.login a.btn-login:active{
	margin-top:4px;
	border-bottom-width: 0px;
}

header div.login a.btn-newacc{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	text-decoration: none;
	color: #C6EDFF;
}

header div.login a.btn-newacc:hover{
	color: #FFF;
	text-decoration: underline;
}

header nav{
	width: 100%;
	height: 35px;
	background: rgba(0,0,0,0.2);
}

/** SESSÃO SLIDE **/
section#slide{
	background: #FFF;
	width: 100%;
	height: 500px;
	position: relative;
}

section#slide div.itens{
	width: 100%;
	height: 500px;
	overflow: hidden;
}

section#slide div.item{
	width: 100%;
	height: inherit;
	overflow:...