JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <article class="card">
    <header class="card__thumb">
      <a href="#">
        <!-- <img src="http://lorempicsum.com/simpsons/370/235/1" alt=""> -->
        <img src="http://og.infg.com.br/in/19624422-aae-bdb/FT1086A/420/IbrahimovicManchester-United.jpg" alt="">
      </a>

    </header>
    <div class="card__date">
      <span class="card__date__day">6</span>
      <span class="card__date__month">July</span>
    </div>
    <div class="card__body">
      <div class="card__category"><a href="#">Photos</a></div>
      <h2 class="card__title"><a href="#">즐라탄이 올드 트래프드에 입성했다.</a></h2>
      <div class="card__subtitle">맨유 유니폼 입고 활짝 웃는 즐라탄 이브라히모비치</div>
      <p class="card__description">
        지난 시즌 분데스리가에서 20도움을 기록하며 특급 도우미로 손꼽힌 미키타리안이 측면에서 플레이메이킹을 담당한다면 39골을 터트리며 프랑스를 평정한 즐라탄이 최전방에서 마무리하는 장면을 볼 수 있게 됐다.
      </p>
    </div>
    <footer class="card__footer">
      <i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;6 min
      <i class="fa fa-comment-o" aria-hidden="true"></i>&nbsp;<a href="#">39 comments</a>
    </footer>
  </article>

SCSS

$transition-duration: 0.3s;
$color: #EF5A31;

.card {
  min-width: 400px;
  max-width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  -webkit-transition: box-shadow $transition-duration;
  transition: box-shadow $transition-duration;
  overflow: hidden;
  a {
    color: inherit;
    text-decoration: none;
  }
}

.card:hover {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}

.card__date {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 45px;
  height: 45px;
  padding-top: 10px;

  color: #fff;
  text-align: center;
  line-height: 13px;
  font-weight: bold;

  background-color: $color;
  border-radius: 50%;

  &__day {
    display: block;
    font-size: 14px;
  }

  &__month {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
  }
}

.card__thumb {
  height: 235px;
  // height: 130px;
  overflow: hidden;
  background-color: #000;
  transition: height $transition-duration;
  img {
    width: 100%;
    display: block;
    opacity: 1;
    transition-property: opacity, transform;
    transition-duration: $transition-duration;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.card:hover .card__thumb img {
  opacity: 0.6;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.card:hover .card__thumb {
  height: 90px;
}

.card__body {
  position: relative;
  padding: 20px;
  height: 185px;
  -webkit-transition: height $transition-duration;
  transition: height $transition-duration;
  .card:hover & {
    height: 185px + 145px;
  }
}

.card:hover .card__body {

}

.card__category {
  position: absolute;
  left: 0;
  top: -25px;

  height: 25px;

  padding: 0 15px;
  background-color: $color;

  color: #fff;
  font-size: 11px;
  line-height: 25px;
  text-transform: uppercase;
}

.card__title {
  margin: 0;
  padding: 0 0 10px 0;
  font-size: 22px;
  color: #000;
  font-weight: bold;
  transition: all...