This is not a question but an code snippet for the inverted border radius in tailwind css, after trying with css to tailwind converted and some chat gpt help i was able to reproduce this.

<div
  class="flex min-h-screen flex-col items-center justify-center bg-yellow-200"
>
  <div class="relative h-24 w-80 rounded-tl-25 rounded-tr-25 bg-red-600">
    <div
      class="absolute -bottom-0 -left-24 h-12 w-24 rounded-br-25 bg-transparent shadow-[25px_0_0_0] shadow-red-600"
    ></div>
    <div class="p-2 font-mono text-2xl">Inverted Column</div>
    <div
      class="absolute -bottom-0 -right-24 h-12 w-24 rounded-bl-25 bg-transparent shadow-[-25px_0_0_0] shadow-red-600"
    ></div>
  </div>
  <div class="h-60 w-96 rounded-t-lg bg-red-600"></div>
</div>

it is a simple trick to reproduce the inverted tailwind border radius