JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div class="partner-companies">
    <a class="partner-company" href="/project/jeff-banks/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/jeff-banks-logo.png" alt="Jeff Banks" />        
    </a>
    <a class="partner-company" href="/project/yours-clothing/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/yours-clothing-logo.png" alt="Yours Clothing" />        
    </a>
    <a class="partner-company" href="/project/suit-direct/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/suit-direct-logo.png" alt="Suit Direct" />      
    </a>
    <a class="partner-company" href="/project/pal-zileri/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/pal-zileri-logo.png" alt="Pal Zileri" />
    </a>
    <a class="partner-company" href="/project/moss-bros/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/moss-bros-logo.png" alt="Moss Bros" />
    </a>
    <a class="partner-company" href="/project/lipstick-boutique/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/lipstick-boutique-logo.png" alt="Lipstick Boutique" />
    </a>
    <a class="partner-company" href="/project/max-studio/">
        <span class="partner-company__helper"></span>
        <img class="partner-company__logo" src="http://beta.remarkable.net/wp-content/uploads/2014/03/leon-max-logo.png" alt="Leon Max - MaxStudio.com" />
    </a>
    <a class="partner-company"...

CSS

.partner-companies {
    border:1px solid #e9e9e9;
    margin-top:20px;
    margin-bottom:20px;
    padding:20px;
    text-align:center;
}

.partner-company {
    border:1px solid transparent;
    display:inline-block;
    height:80px;
    padding-left:30px;
    padding-right:30px;
    margin:10px;
    text-decoration:none;
    
    -moz-transition: all 150ms;
    -o-transition: all 150ms;
    -webkit-transition: all 150ms;
    transition: all 150ms;
}
.partner-company:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border: 1px solid #9c2f2c;
}

.partner-company__helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}  
.partner-company__logo {
    border:none;
    vertical-align: middle;
}