JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
      <div class="image">
        <a href="#">
            <img src="http://i.imgur.com/rthFtAb.jpg" />
        </a>
      </div>
    </div>

CSS

.product {
        height:225px;
        min-height:225px;
        max-width:220px;
        background-color:#ff00ff;
    
    }
    
    .image {
        position: relative;
        height: 100%;
        
    }
    
    .image img {
        width: 220px;
        height: 105px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -110px;
        margin-top: -52px;
    
    }