<div class="container">
  <!-- code here -->
  <div class="text-box">
    <h1>300 FOLLOWERS</h1>
    <h1>300 FOLLOWERS</h1>
  </div>
    <p>THANK YOU<span>:)</span></p>
</div>

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

body {
  font-family: "Inter", sans-serif;
  background-color: #FFF;
}

.text-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 8vw;
  font-weight: 900;
  background-color: #000;
  color: #fff;
  display: block;
  padding: .5em;
}

h1:nth-child(2) {
  position: absolute;
  background-color: #fff;
  color: #000;
  clip-path: inset(-1% -1% 50% -1%); // Added the negative values to prevent icky "bleed" in Chrome
}

p {
  font-size: 2vw;
  font-weight: 900;
  margin-top: 1em;
  text-align: center;
  span {
    display: block;
    transform: rotate(90deg);
    margin-top: .25em;
  }
}

// Codepen spesific styling - only to center the elements in the pen preview and viewport
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
// End Codepen spesific styling