JSFiddle - React, Tailwind, and code Playground

HTML

<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://www.iconpng.com/png/stickers/books.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
<div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Books-2-icon.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
<div class="views-row views-row-1 views-row-odd views-row-first">
      <div class="views-field views-field-title">        
        <span class="field-content"><a href="/country">Up Country</a></span>  
      </div>  
      <div class="views-field views-field-field-book-image">
          <div class="field-content">
              <a href="/country">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/simple-black-square-icons-culture/126872-simple-black-square-icon-culture-books3-stacked.png" alt="Smiley face">
</a>

          </div>  
      </div>  
  </div>
</div>

CSS

.view-content{
    display:block;
}
.views-row{
    float:left;
    margin:5px;
    padding:5px;
    border:1px solid grey;
}
.views-field.views-field-title {
    text-align: center;
}
.field-content img {
    width: 150px;
    height: 200px;
}