JSFiddle - React, Tailwind, and code Playground

HTML

<div class='card'>
  <div class="content">
  <div>
  
  
    <h2>
      Тесла, только дешевле
    </h2>

    <p>
      Жигули́ (1970—2014) — марка автомобилей малого класса, производившихся ОАО «АвтоВАЗ»
    </p>
    
    </div>
  </div>
</div>

CSS

.card {
  width: 350px;
  height: 400px;
  border: 1px solid black;
  background: url('https://img03.rl0.ru/b62e53760c449a3c11176d7f9253e588/c615x400i/news.rambler.ru/img/2018/09/24171939.135176.9600.jpg');
  background-size: cover;
  background-position: center;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, transparent 0%, rgba(253, 187, 45, 0.7) 65%, rgba(124, 105, 64, 1) 90%);
  color: white;
  font-family: sans-serif;
  align-items: flex-end;
  justify-content: center;
}

.content div {
  margin-top: auto;
  text-align: center;
}