<div class="container">
  <div class="top">
    <span class="figure">67%</span>of marketers anticipate investing at least a quarter of their budgets into a metaverse/AR/VR social strategy
  </div>
  <div class="bottom"></div>
</div>

html {
  box-sizing: border-box;
  height: 100%;
  font-family: Proxima Nova,proxima-nova,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  font-size: 16px;
  line-height: 24px;
}

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

body {
  min-height: 100%;
  width: 100%;
  background-color: black;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure {
  display: block;
  font-size: 43px;
  line-height: 50.6667px;
  font-family: Recoleta,recoleta,proxima-nova,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol
}

.container {
  width: 250px;
  height: 250px;
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows: 20px 1fr 20px;
}

.top {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: white;
  padding: 20px;
  z-index: 2;
  grid-column: 2 / -1;
  grid-row: 1 / 3;
}

.bottom {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #a1d2f8;
  background-image: linear-gradient(117.64deg,#a1d2f8 10%,#0a3960 60.35%);
  z-index: 1;
  grid-column: 1 / 3;
  grid-row: 2 / -1;
}