JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-group">
  <div class="card">
    <div class="card-img">
      <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="" width=100>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card-title</h5>
      <div class="card-content">
        Card-content
      </div>
    </div>
  </div>
	<div class="card">
    <div class="card-img">
      <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="" width=100>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card-title</h5>
      <div class="card-content">
        
      </div>
    </div>
  </div>
	<div class="card">
    <div class="card-img">
      <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="" width=100>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card-title</h5>
      <div class="card-content">
        Card-content
      </div>
    </div>
  </div>
	<div class="card">
    <div class="card-img">
      <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="" width=100>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card-title</h5>
      <div class="card-content">
        Card-content
      </div>
    </div>
  </div>
	<div class="card">
    <div class="card-img">
      <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" alt="" width=100>
    </div>
    <div class="card-body">
      <h5 class="card-title">Card-title</h5>
      <div class="card-content">
        Card-content
      </div>
    </div>
  </div>
</div>

CSS

*{
  box-sizing:border-box;
}
.card-group {
  display: flex;
  flex-flow:row wrap;
  justify-content: space-around
}

.card-group > .card{
	margin-bottom: 15px;
}

.card {
  padding: 20px 10px 20px 15px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
}

.card-img img{
  width:100%;
  display:block;
  height:auto;
}