JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<nav class="nav_main">
    <div class="centered">
        <div class="left site_title">
            <a href="#">
                <img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/scratch_icon_zps49ddf990.png" class="nav_logo" />
                <h1 class="site_name">Pull<span class="bold">Josh</span></h1>
            </a>
        </div>
        <div class="right nav_links">
                <a href="#">Home</a>
                <a href="#">Blog</a>
                <a href="#">Projects</a>
                <a href="#">About</a>
        </div>
    </div>
</nav>
<div class="big_header">
    <div class="centered">
        <h1 class="big_header_title">Hello, world!</h1>
        <p class="big_header_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ab dolor ut laborum enim quibusdam recusandae explicabo nesciunt eligendi veritatis pariatur iusto maiores quae natus.</p>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
    font-family:'Open Sans', sans-serif;
    background:#ddd;
    margin:0px;
    padding:0px;
}
.bold {
    font-weight:bold;
}
.centered {
    margin:0 auto;
    padding:0px 40px;
    max-width:1024px;
}
.nav_main {
    background: rgba(255,255,255,0.5);
    height:70px;
    overflow:hidden;
}
.nav_logo {
    width:45px;
    height:45px;
    border-radius: 999px;
    transition:box-shadow 0.1s ease-out;
}
.site_name {
    display:inline-block;
    font-size:45px;
    line-height:1;
    -webkit-margin-before:0px;
    -webkit-margin-after:0px;
    margin:0px;
    margin-left:5px;
    font-weight:normal;
    vertical-align: top;
    color:#222;
    transition:text-shadow 0.1s ease-out;
}
.left {
    float:left;
}
.right {
    float:right;
}
.site_title a {
    padding:12px 0px;
    display:block;
    text-decoration:none;
}
.site_title a:hover .nav_logo {
    box-shadow:1px 1px 5px rgba(0,0,0,0.1);
}
.site_title a:hover .site_name {
    text-shadow:1px 1px 5px rgba(0,0,0,0.2);
}
.nav_links a {
    display:inline-block;
    padding:24px;
    background:transparent;
    color:#516691;
    text-decoration:none;
    transition:background 0.1s ease-out;
}
.nav_links a:hover {
    background:rgba(255,255,255,0.5);
}
.big_header {
    background:#516691;
    padding:40px 0px;
    color:white;
}
.big_header_title {
    font-size:80px;
    line-height:1;
    -webkit-margin-before:0px;
    -webkit-margin-after:0px;
    margin:30px 0px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}
.big_header_content {
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}