JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-group">
  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card__imgContainer">
      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">
    </div>
    <div class="card__content">
      <h2 class="card__heading">Lorem, ipsum.</h2>
      <div class="card__info">
        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>
        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>
      </div>
      <div class="card__buttons">
        <a class="button card__button" href="./spectacle.html">Виж повече</a>
        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>
      </div>
    </div>
  </div>

</div>

SCSS

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.card {
  & {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 60%;
  }
  &__imgContainer {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  &__img {
    display: block;
    flex: 1 1 0;
    width: 100%;
  }
  &__content {
    padding: 10px 30px 15px;
    background: #4821f5;
    /* Old browsers */
    background: -moz-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( 45deg, #4821f5 0%, #3b8dd4 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  &__info {
    & {
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &>* {
      display: block;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    &>*+* {
      margin-top: 5px;
    }
  }
  &__icon {
    margin-right: 6px;
    line-height: inherit;
  }
  &__heading {
    font-size: 36px;
    line-height: 1;
  }
  &__buttons {
    & {
      display: flex;
      flex-wrap: wrap;
      margin: -8px;
    }
    &>* {
      margin: 8px;
    }
  }
  &__button {
    padding-top: 0.65em;
    padding-bottom: 0.65em;
  }
  &__textbox {
    margin-top: 20px;
  }
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  margin: -1%;
  &>* {
    width: 31%;
    margin: 1%;
  }
}