JSFiddle - React, Tailwind, and code Playground

by Clayderson Ferreira

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="row email-pending">
    <div class="col s12">
        <p>
            Confirme seu endereço de e-mail para tornar sua conta mais segura. Para obter um novo link de confirmação ou alterar seu e-mail atual, clique <a href="#">aqui</a>.
        </p>
    </div>
</div>
<div class="row">
    <div class="col s12 m3 l3 xl2 leftbar">
        leftbar
    </div>
    <div class="col s12 m9 l9 xl10 no-padding">
        <div class="row">
            <div class="col s12 topbar">
                topbar
            </div>
            <div class="col s12 pagecontent">
                content
            </div>
        </div>
    </div>
</div>

CSS

.debug-red {background-color: red;}
.debug-green {background-color: green;}
.debug-blue {background-color: blue;}
.debug-yellow {background-color: yellow;}
.debug-black {background-color: black;}

body {
    background-color: #ffffff;
}

a {
    color: #26a69a;
}

.no-padding {
    padding: 0;
}

.email-pending {
    margin: 0;
    text-align: center;
    background-color: #d66234;
    color: #f5f5f5;
}

.email-pending a {
    color: #f5f5f5;
}

.email-pending a:hover {
    text-decoration: underline;
}

.leftbar {
    background-color: #263238;
    color: #f5f5f5;
}

.topbar {
    background-color: #263238;
    color: #f5f5f5;
}

.pagecontent {
    background-color: #dedede;
}