JSFiddle - React, Tailwind, and code Playground

by Bowen Huang

HTML

<div class="section-video">
  <ul class="list">
    <li>
      <a href="https://www.youtube.com/embed/vCS_Nl4R9W8">
        <div class="img">

          <span class="time">07:12</span>
        </div>
        <span class="title">ЕВРО 2016 - ЖЕСТЬ! ТРЕНЕР СБОРНОЙ ГЕРМАНИИ ОПОЗОРИЛСЯ НА ВЕСЬ МИР</span>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/embed/8H2VfEO4n1k">
        <div class="img">

          <span class="time">04:58</span>
        </div>
        <span class="title">ЧЕХИЯ - ХОРВАТИЯ 2:2 ОБЗОР МАТЧА </span>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/embed/R5kRrJuolak">
        <div class="img">
          <img class="" src="http://down2.9apps.com:7080/group1/M01/76/E4/poYBAFdlMBmAKGmxAAA7r722CEs285.jpg" alt="logo">
          <span class="time">03:54</span>
        </div>
        <span class="title">ИСПАНИЯ - ТУРЦИЯ 3:0 ОБЗОР МАТЧА </span>
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/embed/zjKbunbkU78">
        <div class="img">
          <img class="" src="http://down2.9apps.com:7080/group1/M00/76/E4/pYYBAFdlMBuAO13wAAA-uPs5iqo997.jpg" alt="logo">
          <span class="time">03:14</span>
        </div>
        <span class="title">ИТАЛИЯ - ШВЕЦИЯ 1:0 ОБЗОР </span>
      </a>
    </li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
}

.section-video ul.list {
  padding: 5px;
  width: 100%;
  font-size: 12px;
  background-color: #0363b5;
  list-style: none;
  overflow: hidden;
}

.section-video ul.list li {
  display: inline-block;
  width: 50%;
  padding: 5px;
  float: left
}

.section-video ul.list li a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
}

.section-video ul.list li .img {
  width: 100%;
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 54.545454%;
}

.section-video ul.list li .img img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

.section-video ul.list li .img .time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 15px;
  font-size: 12px;
  line-height: 18px;
  background-color: rgba(0, 0, 0, .48);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 0 10px
}

.section-video ul.list li .title {
  display: block;
  line-height: 18px;
  padding: 4px 0;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis
}