JSFiddle - React, Tailwind, and code Playground

by gandjyar

HTML

<div class="articles-container flexbox">
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="http://ekstaging.flywheelsites.com/wp-content/uploads/2019/03/roasted-chicken-thighs-1-of-1-7-650x650.jpg"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="http://ekstaging.flywheelsites.com/wp-content/uploads/2019/03/roasted-chicken-thighs-1-of-1-7-650x650.jpg"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">One Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
</div>

CSS

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.flexbox .sm-col-3 {
  width: calc(1/3 * 100% - 16px);
  display: flex;
  flex-direction: column;
}
.entry {
  position: relative;
}
.entry-image {
  display: block;
  margin: 0 auto;
}
.entry-content {
  flex: 1;
  background: rgba(0, 87, 149, 1);
  padding: 8px 9px 9px;
  display: flex;
  align-items: center;
}
.entry-title {
  margin: 0;
}
.entry-title-link {
  text-align: center;
  color: #fff;
  width: 100%;
}