How to create a curved transition effect between tabs in CSS?

I’m working on a tab component where I want to create a smooth, curved transition between the active tab and the next tab.

I have tried using CSS pseudo-elements, but I couldn’t achieve the desired effect. Here’s a simplified version of my current code on CodePen:

CodePen Link:
https://codepen.io/Tomas-Gil-Amodeo/pen/WNBdVBv

My actual code is React and Tailwind, and this is how it looks:

import { useState } from "react";
import FAQCollapsible from "./FAQCollapsible";
import "./styles.css";

...

const FAQTabs = () => {
  const [activeTab, setActiveTab] = useState(tabs[0]);

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div className="my-[80px] mx-auto mx-full md:my-0 md:py-[80px] md:px-[196px]">
      {/* <h2>FAQs</h2>
      <p>Find answers to frequently asked questions </p> 
      <div className="max-w-full md:max-w-[768px] mx-auto rounded-lg border border-purple top-left-border-rad-none sd-tabs">*/}
      <div
        container
        className="md:max-w-[768px] mx-auto border top-left-border-rad-none border-purple rounded-[20px]"
      >
        <div
          data-tab-labels-container
          className="flex justify-start bg-white -mt-[7.75%] rel-1px"
        >
          {tabs.map((tab, index) => {
            const isActive = activeTab === tab;
            const isNextTab =
              tabs[(tabs.indexOf(activeTab) + 1) % tabs.length] === tab;
            const nextTabClass =
              isNextTab && index !== 0 ? "next-tab-border-radius" : "";

            return (
              <button
                style={{ fontFamily: "Clash Display" }}
                key={tab}
                className={`px-[1rem] py-[13px] md:px-14 md:py-4 text-center tabs-border text-sm md:text-[18px] leading-[140%] border-rad-top ${
                  isActive
                    ? "bg-white negative-fff-border text-black font-semibold special-class"
                    : isNextTab
                    ? `bg-[#A05BF7] text-white font-medium border-none ${nextTabClass}`
                    : "bg-purple text-white font-medium border-none"
                }`}
                onClick={() => handleTabClick(tab)}
              >
                {tab}
              </button>
            );
          })}
        </div>
      // collapsibles section
      </div>
    </div>
  );
};

export default FAQTabs;

css:

.negative-fff-border {
  position: relative;
}
.negative-fff-border::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -5px;
  background: #fff;
  bottom: -8%;
  left: 0;
}
.top-left-border-rad-none {
  border-top-left-radius: 0px !important;
}
.next-tab-border-radius {
  border-bottom-left-radius: 20px;
}
.tabs-border {
  border-top: 1px solid #7c1be0;
  border-left: 1px solid #7c1be0;
  border-right: 1px solid #7c1be0;
}
.rel-1px {
  position: relative;
  right: 1px;
}
.border-rad-top {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.next-to-active {
  background: #a05bf7;
}
.special-class {
  position: relative;
}
.special-class::after {
  content: "";
  position: absolute;
  width: 22px; 
  height: 20px; 
  background: #fff; 
  bottom: -11px; 
  left: calc(100% - 10px); 
  border-bottom-left-radius: 20px; 
  transform: rotate(45deg); 
  z-index: 1; 
}

how it should look/design:

Any help is highly appreciated!