JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div class="container">
  <div class="grid">
    <div class="grid__item">
      <div class="movie-card">
        <div class="movie-card__poster"></div>
        <div class="movie-card__content">
          
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="movie-card">
        <div class="movie-card__poster"></div>
        <div class="movie-card__content">
          <div class="movie-card__content-data">
            <a href="#" class="buy-ticket-btn">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #1565c0;
}

.container {
  width: 100%;
  max-width: 654px;
  margin: 0 auto;
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  &__item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 32px;
  }
}

.movie-card {
  position: relative;
  width: 100%;
  max-width: 226px;
  margin: 0 auto;
  
  &__poster {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: #546e7a;
    padding: 0 0 154% 0;
    box-shadow: 0 10px 16px -14px #000;
  }
  
  &__content {
    background-color: #fff;
    border-radius: 4px 4px 0 0;
    
    position: absolute;
    z-index: 5;
    top: 30px;
    left: -20px;
    right: -20px;
    min-height: 100%;
    text-align: center;
    transform: scale(.4, .1);
    transform-origin: center top;
    transition: transform .5s cubic-bezier(0.75, 1.23, 0.82, 1.19);
    
    &-data {
      background-color: #fff;
      border-radius: 0 0 4px 4px;
      position: absolute;
      top: 100%;
      width: 100%;
      text-align: center;
    }
  }
  
  &:hover {
    .movie-card__content {
      transform: scale(1,1);
    }
  }
}

.buy-ticket-btn {}