JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<body>
  <div class="wrapper">
    <div id="header">
        <div id="header_logo_link">
            <a href="/"><img src="http://placehold.it/250x64"><span class="overlay"></span></a>
        </div>
        <div id="header_logo_link">
            <a href="/home">Home</a>
        </div>
    </div>
  </div>
</body>

CSS

#header {
        background-color:#2C2C2C;
        height:88px;
        width:100%;
        margin: 0px auto 0 auto;
    }
    #header_logo_link {
        float: left;
        width: 250px;
        position: relative;
    }
    #header_logo_link .overlay {
        position: absolute;
        top: 0;
        right: -30px;
        bottom: 0;
        left: 0;
        display: none;
        background-color: #4d4d4d;
    }
    #header_logo_link:hover .overlay {
        display: block;
    }
    #header_logo_link img {
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 15px;
        padding-bottom: 10px;
        background: transparent;
    }
    #header_logo_link :hover {
        background-color: #4d4d4d;
    }
    body, .wrapper {
        min-height: 100%;
        overflow: hidden;

        margin: 0;
        padding: 0;
        min-height: 100%;
    }