JSFiddle - React, Tailwind, and code Playground

by telisjok

HTML

<div class="col-xs-12 no-padding related-articles-row" style="display: flex;overflow-x: auto;">
  <div class="col-xs-12 col-md-3 related-article">
    <div class="col-xs-12 no-padding">
      <div class="post-img">
        <a href="#"><img src="http://www.baytownmotors.com/wp-content/uploads/2013/11/dummy-image-square.jpg" alt=""></a>
      </div>
      <div class="post-title"><a href="#">Dummy title Dummy title Dummy title </a></div>
      <div class="post-description">Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description </div>
    </div>
  </div>

  <div class="col-xs-12 col-md-3 related-article">
    <div class="col-xs-12 no-padding">
      <div class="post-img">
        <a href="#"><img src="http://www.baytownmotors.com/wp-content/uploads/2013/11/dummy-image-square.jpg"></a>
      </div>
      <div class="post-title"><a href="#">Dummy title Dummy title Dummy title Dummy title </a></div>
      <div class="post-description">Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description Some description .</div>
    </div>
  </div>

  <div class="col-xs-12 col-md-3 related-article">
    <div class="col-xs-12 no-padding">
      <div class="post-img">
        <a href="#"><img src="http://www.baytownmotors.com/wp-content/uploads/2013/11/dummy-image-square.jpg"></a>
      </div>
      <div class="post-title"><a href="#">Dummy title Dummy title </a></div>
      <div class="post-description">Some description Some description Some description Some description Some description Some description Some description Some description Some description Some...

CSS

.related-title {
  color: #32488d;
  font-size: 24px; 
  padding-bottom: 4px;
  font-weight: 500 !important;
  border-bottom: 1px solid #ccc;
}

.related-articles-row {
  display: flex !important;
  overflow-x: auto !important;
}
.related-article { 
  min-width: 25% !important;
  padding: 0 10px !important;
}
.related-article .post-img {
  height: 130px;
  margin: 10px 0px; 
}
.related-article .post-img img {
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
}
.related-article .post-title {
  height: 60px;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 500;
}
.related-article .post-title a {
  color: #5a5a5a;
}
.related-article .post-description {
  font-size: 14px;
  line-height: 1.3;
  margin-top: 5px !important;
}