JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <figure>
    <div>Сжимай окно</div>
    <div>Сжимай окно</div>
    <div>Сжимай окно</div>
    <div>Сжимай окно</div>
    <div>Сжимай окно</div>
  </figure>

</div>

CSS

/* Сбросы НАЧАЛО */

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

body {
  margin: 0;
  font-family: sans-serif;
}

figure {
  margin: 0;
}

.container {
  width: 100%;
  max-width: 500px; /* Та самая максимальная ширина контейнера для примера */ 
  margin: 0 auto;
}

/* Сбросы КОНЕЦ */


figure {
  background: linear-gradient(to top, purple, #08f);
  border-radius: 10px;
  margin: 15px;
  
  position: relative;
  font-size: 1vw; /* Изначальный размер шрифта, который зависит от экрана */
}

/* Т. к. будет ограниченный по ширине контейнер, то при достижении этого размера, будет фиксировать размер шрифта, нужно подбирать */
@media (min-width: 500px) {
 
  figure {
    font-size: 5px;
  }
  
}

figure:before { /* Хак соотношения сторон */ 
  content: "";
  padding-bottom: 100%;
  display: block;
}

figure:after { /* Просто для оформления тень с градиентом позади */ 
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to top, purple, #08f);
  filter: blur(10px);
  opacity: .75;
}

figure>* {
  position: absolute;
  color: #fff;
}

figure>div:nth-child(1) {
  top: 10%;
  right: 20%;
  font-size: 2em;
}

figure>div:nth-child(2) {
  top: 25%;
  left: 20%;
  font-size: 3.5em;
}

figure>div:nth-child(3) {
  bottom: 5%;
  left: 3%;
  font-size: 3.25em;
}

figure>div:nth-child(4) {
  top: 55%;
  left: 40%;
  font-size: 2em;
}

figure>div:nth-child(5) {
  bottom: 15%;
  right: 10%;
  font-size: 6em;
}