JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<body>
<div id="wrapper">
<header>
<div id="main-headbar-logo" onclick="godaddy();"></div>
<div class="main-headbar-spacer"></div>
<div class="main-headbar-button main-headbar-button-right">
<a href="/help">Help</a>
</div>
</header>
<div id="main-data">
login
</div>
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #eee;
text-decoration: none;
}
html, body
{
height: 100%;
}
#wrapper
{
width: 100%;
height: 100%;
background-color: #cef;
}
header
{
display: table;
width: 100%;
height: 40px;
background-color: #333;
color: #eee;
font-size: 13px;
}
#main-headbar-logo
{
min-width: 170px;
height: 40px;
display: table-cell;
background-image: url(logo.png);
background-repeat: no-repeat;
}
.main-headbar-button
{
display: table-cell;
padding-top: 10px;
min-width: 70px;
text-align: center;
}
.main-headbar-spacer
{
display: table-cell;
width: 100%;
background: transparent;
}
.main-headbar-button-right
{
text-align: right;
padding-right: 10px;
}
#main-data
{
}
#btm-info
{
}
a
{
font-weight: 700;
}