html – CSS Radial Gradient Masks Inflicting Textual content Visibility Subject in Overlapping Divs

I’ve a waves in css:

made with html:

<div>
  <div class="field w-[full] h-[10rem] bg-indigo-500"></div>
  <div class="box1 w-[full] h-[10rem] bg-indigo-800 mt-[-10rem] relative z-0">
    <div class="z-10 absolute">
      <p>Made for studying functions</p>
      <p>Code at <a href="">github</a></p>
    </div>
  </div>
</div>

and css:

.field {
  --mask: radial-gradient(42.43px at 50% 60px, #000 99%, #0000 101%)
      calc(50% - 60px) 0/120px 100%,
    radial-gradient(42.43px at 50% -30px, #0000 99%, #000 101%) 50% 30px/120px
      100% repeat-x;
  -webkit-mask: var(--mask);
  masks: var(--mask);
}
.box1 {
  --mask: radial-gradient(42.43px at 50% 60px, #000 99%, #0000 101%)
      calc(50% - 60px) 0/120px 100%,
    radial-gradient(42.43px at 50% -30px, #0000 99%, #000 101%) 50% 30px/120px
      100% repeat-x;
  -webkit-mask: var(--mask);
  masks: var(--mask);
  margin-left: -110px;
}

the issue is that i cant see the textual content contained in the darker div. I attempted z-index and place absolute and relative. Are you aware the way to make it seen utilizing tailwind css?