JSFiddle - React, Tailwind, and code Playground

HTML

<main class="main">
  Контент тела страницы
</main>

<footer class="footer">
  <div class="footer__content">
   Текст о несбывшихся мечтах касательно чудо-подвала №1
   <br>Текст о несбывшихся мечтах касательно чудо-подвала №2
   <br>Текст о несбывшихся мечтах касательно чудо-подвала №3
   <br>Текст о несбывшихся мечтах касательно чудо-подвала №4
  </div>
</footer>

SCSS

.main {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #eee;
  text-align: center;
}

.footer {
  $self: &;
  
  color: #fff;
  text-align: center;
  
  &:before {
    content: "";
    display: block;
    height: 50px;
    background: url(https://i.ibb.co/XFyWWjm/2019-04-03-2-52-46.png) no-repeat bottom center;
    background-size: contain;
  }
  
  @at-root #{$self}__content {
    background: #52267d;
    padding: 1rem;
    line-height: 1;
  }
  
}

body {
  margin: 0;
}