JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light"style="background-image:url('http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg');">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light" style="background-image:url('http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg');">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light" style="background-image:url('http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg');">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

CSS

.card {
  position: relative;
  background-color: #f4f4f4;
  margin: 10px auto;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}

.card {
  padding-bottom: 5px;
}

.card-image {
    background-size: cover;
    padding-bottom: 50%;
}