JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<nav class="nav">
    <div class="leftLinks">
        <a href="#" class="navLink">Home</a><a href="#" class="navLink">Blog</a>
    </div>
    <a href="#">
        <div class="banner">
            <img src="http://i1172.photobucket.com/albums/r574/JoshPullen27/scratch_icon_zps49ddf990.png" class="bannerIcon" />
        </div>
    </a>
    <div class="bannerPlaceholder"></div>
    <div class="rightLinks">
        <a href="#" class="navLink">About</a><a href="#" class="navLink">Contact</a>
    </div>
</nav>

<div class="contentWrapper">
    hi
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);

body {
    margin:0px;
    padding:0px;
}
.nav {
    background:#F5DB9F;
    display:block;
    padding:50px 25px;
    font-family: 'Slabo 27px', serif;
}

.leftLinks, .rightLinks {
    width:calc(49% - 62.5px);
    margin:0px;
    padding:0px;
    color:rgba(46,25,5,0.7);
    font-size:26px;
    display:inline-block;
}
.leftLinks a, .rightLinks a {
    text-decoration:none;
    color:rgba(46,25,5,0.8);
    display:inline-block;
    width:calc(50% - 3px);
    text-align:center;
    margin:0px;
}
.leftLinks a:hover, .rightLinks a:hover {
    color:rgba(0,0,0,0.9);
}

.banner {
    margin:0px;
    background:#BF2C15;
    width:124px;
    height:132px;
    position:absolute;
    top:0px;
    left:calc(50% - 62px);
    text-align:center;
    transition:height 0.1s ease-out;
}
.banner:hover {
    height:150px;
}
.banner:after {
    content: "";
    position: absolute;
    bottom: -33px;
    left: 0;
    height: 0;
    width: 0;
    border: solid 62px #BF2C15;
    border-top-width: 0px;
    border-bottom-width: 33px;
    border-bottom-color: transparent;
    z-index:999;
    -webkit-transform: rotate(0.01deg);
}

.bannerPlaceholder {
    display:inline-block;
    width:124px;
}

.bannerIcon {
    display:inline-block;
    margin-top:30px;
    border-radius:999px;
    box-shadow:0px 2px 5px #851C0C;
    width:65%;
}
a:hover .bannerIcon {
    box-shadow:0px 3px 5px #851C0C;
}

.contentWrapper {
    background:#1B355E;
    height:1200px;
}