JSFiddle - React, Tailwind, and code Playground

by Deepak Yadav

HTML

<div class="field-content">
    <div class="tile_image">
	      <img width="320" height="194" alt="" src="http://placehold.it/320x194" />
    </div>
	    <div class="tile_content has-img">
	        <div class="front_tile_title">Title</div>
	        <div class="front_tile_body">Lorem ipsum dolor si amet</div>
	    </div>    	
</div>
<!-- ends -->

<!-- tile without image -->
<div class="field-content">
    <div class="tile_image"></div>
	     <div class="tile_content">
	        <div class="front_tile_title">Title</div>
	          <div class="front_tile_body">Lorem ipsum dolor si amet</div>
	     </div>    	
</div>

CSS

*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding: 0}


.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
overflow: hidden;
background-color: grey;
text-align: center;
} 

.field-content:after {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;

}

.has-img {margin-top: -209px} /** height of image + margin-bottom - you gave in css*/

.tile_content {
color: #fff;
display: inline-block;
vertical-align: middle;
}