JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<ul class="news">

  <li class="news-item">
    <a href="#">
      <div class="news-img">
        <img src="http://pavlonews.info/foto/2013/03/%D0%A1%D0%BB%D1%83%D1%87%D0%B0%D0%B9%D0%BD%D0%B0%D1%8F-%D0%B2%D1%81%D1%82%D1%80%D0%B5%D1%87%D0%B0.jpg" alt="">
      </div>
      <div class="news-item-title">Загаловок</div>
    </a>
  </li>

  <li class="news-item">
    <a href="#">
      <div class="news-img">
        <img src="http://metalarea.org/images/audiocovers/2018_Jun/acov_tid307147.jpg" alt="">
      </div>
      <div class="news-item-title">Загаловок выф вфыв ыф вфы выф выфв ыф</div>
    </a>
  </li>
  <li class="news-item">
    <a href="#">
      <div class="news-img">
        <img src="https://cdn.pixabay.com/photo/2017/11/04/22/59/time-2919087__340.jpg" alt="">
      </div>
      <div class="news-item-title">Загаловок выф вфыв ыф вфы выф выфв ыф</div>
    </a>
  </li>

  <li class="news-item">
    <a href="#">
      <div class="news-img">
        <img src="https://png.pngtree.com/element_origin_min_pic/16/07/27/1257983f685297a.jpg" alt="">
      </div>
      <div class="news-item-title">Загаловок выф вфыв ыф вфы выф выфв ыф</div>
    </a>
  </li>

  <li class="news-item">
    <a href="#">
      <div class="news-img">
        <img src="https://myrusakov.ru/images/articles/sql-random.jpg" alt="">
      </div>
      <div class="news-item-title">Загаловок выф вфыв ыф вфы выф выфв ыф</div>
    </a>
  </li>


</ul>

CSS

.news {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.news-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  list-style-type: none;
}

.news-item a {
  display: block;
  margin: 0 10px;
}

.news-img {
  position: relative;
  margin-bottom: 10px;
}

.news-img::before {
  content: "";
  display: block;
  padding-top: calc(9 / 16 * 100%); /* соотношение 16:9 */
}

.news-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-item-title {
  font-size: 1.4em;
  font-weight: 500;
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  white-space: normal;
}