<div>
  <ul class="list">
    <li class="card">
      <p class="thum"></p>
      <p class="ttl">彷徨えるレタッチャー!! 静止画と動画の境界をボーダレスにサヴァイヴ!!</p>
      <p class="txt">昨今、オールドメディアからオープンメディアへ広告が変換されていくデジタル化されたアウトプットで、今までにない動きや表現を求められています。</p>
      <p class="sns">share [100] | tweet | facebook</p>
    </li>
    <li class="card">
      <p class="thum"></p>
      <p class="ttl">デザイナー必見!主要デザインツールのアップデートをキャッチアップ!鷹野氏による最新スーパーtipsのご紹介</p>
      <p class="txt">Photoshop、Illustrator、InDesign、そして新アプリDimensionといったアドビのデザイン製品の最新機能を紹介する、アドビデザイン製品担当岩本崇のセッションです。</p>
      <p class="sns">share [100] | tweet | facebook</p>
    </li>
    <li class="card">
      <p class="thum"></p>
      <p class="ttl">iPadで描く! 話題のProject Gemini徹底解説</p>
      <p class="txt">次世代のプロ向けデジタルスケッチアプリを、開発者が徹底解説します。</p>
      <p class="sns">share [100] | tweet | facebook</p>
    </li>
  </ul>
</div>
.list {
  display: flex;
  justify-content: center;
  padding: 0px;
}

.list li {
  list-style: none;
  width: 30%;
  background-color: #ddd;
  margin: 10px;
  padding: 0px;
}

.list li.card {
  background-color: #0B797A;
  color: #fff;
  padding: 5px 15px;
  display: flex;
  flex-direction: column;
}

.list li.card .thum {
  height: 100px;
  background-color: white;
}

.list li.card .ttl {
  font-weight: bold;
}

.list li.card .txt {
  font-size: 70%;
}

.list li.card .sns {
  font-size: 70%;
  color: yellow;
  margin-top: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.