JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul>
  <li class="cols-1">
    <div class="figure-group">
      <i class="icon"></i>
      <p class="photo"><img src="https://static.pexels.com/photos/24353/pexels-photo.jpg" alt=""></p>
      <div class="caption">
        <p class="title">뉴 로열마스터의 탄생</p>
        <p class="meta">
          2017/10/10
          13,000회
        </p>
      </div>
    </div>
  </li>
  <li class="cols-2">
    <div class="figure-group type1">
      <i class="icon"></i>
      <p class="photo"><img src="http://media.caranddriver.com/images/17q1/674191/2018-porsche-911-gt3-official-photos-and-info-news-car-and-driver-photo-676568-s-450x274.jpg" alt=""></p>
      <div class="caption">
        <p class="title">뉴 로열마스터의 탄생</p>
        <p class="meta">
          2017/10/10
          13,000회
        </p>
      </div>
    </div>
  </li>
  <li class="cols-1">
    <div class="figure-group">
      <i class="icon"></i>
      <p class="photo"><img src="https://static.pexels.com/photos/24353/pexels-photo.jpg" alt=""></p>
      <div class="caption">
        <p class="title">뉴 로열마스터의 탄생</p>
        <p class="meta">
          2017/10/10
          13,000회
        </p>
      </div>
    </div>
  </li>
  <li class="cols-1">
    <div class="figure-group type1 onair">
      <i class="icon"></i>
      <p class="photo"><img src="https://www.bajajallianz.com/Corp/images/car-insurance-new.jpg" alt=""></p>
      <div class="caption">
        <p class="title">뉴 로열마스터의 탄생</p>
        <p class="meta">
          2017/10/10
          13,000회
        </p>
      </div>
    </div>
  </li>
  <li class="cols-1"></li>
  <li class="cols-1"></li>
  <li class="cols-1"></li>
  <li class="cols-2"></li>
  <li class="cols-1"></li>
  <li class="cols-1"></li>
</ul>

<div class="figure-group type1 onair" style="width:200px;">
      <i class="icon"></i>
      <p class="photo"><img src="https://www.bajajallianz.com/Corp/images/car-insurance-new.jpg" alt=""></p>
      <div class="caption">
        <p class="title">뉴 로열마스터의 탄생</p>
       ...

CSS

* {
  padding:0;
  margin:0;
  font-size:14px;
  list-style:none;
}
ul {
  width:816px;
  overflow:hidden;
}
ul li {
  float:left;
  width:200px;
  height:200px;
  margin:0 2px 4px;
  background:red;
}
ul li.cols-2 {
  width:404px;
}

.figure-group {
  position:relative;
  height:200px;
  overflow:hidden;
}
.figure-group.onair:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#000000;
  opacity:.5;
}
.figure-group .photo img {
  width:100%;
}
.figure-group .caption {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:70px;
  padding:0 5px;
  background:#ffffff;
}
.figure-group.type1 .caption {
  color:#ffffff;
  background:none;
}