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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 61'%3E%3Cpath d='M452.46,61h1.4c17.08-20.79,43.51-33,78.41-33-10-15-29-28-39-28s-35,24-54,19C439.27,19,454.44,36.08,452.46,61Z' fill='%238138ad'/%3E%3Cpath d='M540,61a50,50,0,0,0-82.85-3.81A30,30,0,0,0,434.35,46a24.49,24.49,0,0,0-42.73-11.39,36,36,0,0,0-58.81,21.19,25,25,0,0,0-38.32.27,41.52,41.52,0,0,0-38.74-9.73,51,51,0,0,0-83.19.32,37,37,0,0,0-36.32,5,37.47,37.47,0,0,0-48.46.46A50,50,0,0,0,0,61Z' fill='%2352267b'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: contain;
  }
  
  @at-root #{$self}__content {
    background: #52267B;
    padding: 1rem;
    line-height: 1;
  }
  
}

body {
  margin: 0;
}