JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="container">
  <div class="[ row ] shop__container">
    <div class="col-sm-3">
      <div class="shop__logo">
        <span>
          <img src="https://d1eh4jcc8anhq3.cloudfront.net/shop/1313.png">
        </span>
      </div>
    </div>  
  </div>
</div>

CSS

.container {
    width: 1170px;
}
.shop__container {
    min-height: 11.5rem;
}
.shop__container {
    display: flex;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
    background-color: green;
}
.col-sm-3 {
    width: 25%;
}

.shop__logo {
    min-height: 11.5em; 
    text-align: center;
    border-right: 1px solid red;    
}

.shop__logo span {
    width: 100%;
    min-height: 100%; 
    display:inline-block;
    vertical-align: middle;
}

.shop__logo img {
    vertical-align: middle;
    border: 0 none;
}