JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </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">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </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">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

CSS

@media (max-width: 990px) {
  .resizeimg {
    height: auto;
  }
}

@media (min-width: 1000px) {
  .resizeimg {
    width: auto;
    height: 350px;
  }
}