JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <ul class="brands-logo">
        <li><a href="#" class="logo1"></a></li>
        <li><a href="#" class="logo2"></a></li>
    </ul>
</header>

CSS

header {
    height: 9.875em;
    background: #666;
    border-bottom: 2px solid #939393;
}

.brands-logo {
    text-align: center;
}

.brands-logo li {
    display: inline-block;
    margin-top: 1.2em;
    margin-right: 3.75em;
    vertical-align: bottom;
}

.logo1 {
    display: block;
    width: 200px;
    height: 133px;
    background: url('http://i.cubeupload.com/xVnWmm.png');
}

.logo1:hover {
    background: url('http://i.cubeupload.com/iIhqoQ.png');
}

.logo2 {
    display: block;
    width: 200px;
    height: 150px;
    background: url('http://i.cubeupload.com/ZmAdgv.png');
}

.logo2:hover{
    background: url('http://i.cubeupload.com/LrnHaY.png');
}